web-dev-qa-db-fra.com

Ajout d'une image et d'un texte à la fois dans le bouton asp.net

Je cherche une solution où je pourrai ajouter une image et un texte à la fois dans le bouton asp.net.

 <asp:Button ID="Button1" runat="server" Text="Button"/>

Je ne peux que spécifier du texte pour le bouton, mais comment puis-je également y ajouter une image?

asp.net.netbutton
8
Arry

Par défaut, ASP .Net ne dispose pas d'un bouton permettant afficher simultanément l'image et le texte . Cependant, vous pouvez y parvenir de deux manières. 

Utiliser CSS

Je préfère les CSS car il est léger et vous pouvez le personnaliser comme vous le souhaitez.

enter image description here

<style type="text/css">
    .submit {
        border: 1px solid #563d7c;
        border-radius: 5px;
        color: white;
        padding: 5px 10px 5px 25px;
        background: url(https://i.stack.imgur.com/jDCI4.png) 
            left 3px top 5px no-repeat #563d7c;
    }
</style>

<asp:Button runat="server" ID="Button1" Text="Submit" CssClass="submit" />

Contrôle de tiers

Configuré pour fonctionner immédiatement. Cependant, vous ne pouvez pas changer leur style facilement.

enter image description here

Utilisez un contrôle tiers tel que Telerik RadButton .

Enfin et surtout, si vous le souhaitez, vous pouvez implémenter vous-même un contrôle de serveur personnalisé.

24
Win

Vous pouvez également utiliser une icône de police à la place d'une 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 );
}

Vous pouvez supprimer les parties background et filter de la classe button dans le style ci-dessus. Je viens de l'utiliser pour le fond dégradé du bouton.

HTML

<button runat="server" id="btnDownload" class="button" onserverclick="clickEvent">
    <i class="fa fa-download" style="font-size:20px;float:left;"></i> DOWNLOAD
</button>

Le bouton ressemble à ci-dessous.

 enter image description here

Fiddle démo ici

Et même vous pouvez changer la couleur de l'icône en ajoutant simplement de la couleur au <i>...</i>. Quelque chose comme ci-dessous.

<button runat="server" id="btnDownload" class="button" onserverclick="clickEvent">
    <i class="fa fa-download" style="font-size:20px;float:left;color:#ff4444;"></i> 
        DOWNLOAD
</button>
0
Ullas