Adding an image and text both in asp.net button

Question

I am looking for a solution where I will be able to add an image and text both in asp.net button.

Answer 1

You can also use a font icon instead of an image.

CSS

.button {
   min-width:175px;
   border-radius:50px;
   background:none;
   outline:none;
   border:none;
   color:#fff;
   padding:15px 25px;
   margin-top:10px;
   background: rgba(115,84,178,1);
   background: -moz-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
   background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(115,84,178,1)), color-stop(34%, rgba(115,84,178,0.95)), color-stop(35%, rgba(115,84,178,0.95)), color-stop(62%, rgba(96,107,192,0.91)), color-stop(100%, rgba(84,160,231,0.85)));
    background: -webkit-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
    background: -o-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
    background: -ms-linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
    background: linear-gradient(45deg, rgba(115,84,178,1) 0%, rgba(115,84,178,0.95) 34%, rgba(115,84,178,0.95) 35%, rgba(96,107,192,0.91) 62%, rgba(84,160,231,0.85) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7354b2', endColorstr='#54a0e7', GradientType=1 );
}

You can remove the background and filter part in the class button in the above style. I just used it for the gradient background for the button.

HTML

     DOWNLOAD

Button looks like below.

Fiddle demo here

And even you can change the icon color by just adding color to the .... Something like below.

     
        DOWNLOAD