Je développe un projet C# ASP.Net. Et je voudrais faire quelque chose de très similaire à ce qui est shown in the following website.C# ASP.Net Fancy Buttons
Cependant, c'est une solution pour la balise HTML <a>, et je cherche une solution pour les boutons ASP.NET.
Quelles sont mes options?
<asp:LinkButton /> est un bon choix. Il est pratiquement identique à <asp:Button />, sauf qu'il crée un lien hypertexte de mise en forme que vous pouvez mettre n'importe quelle image que vous voulez.
Je souligne en utilisant LinkButton au lieu de ImageButton parce que ImageButton utilise différents gestionnaires d'événements, ce qui rend difficile le passage entre eux. Avec Linkbuttons et Buttons, ils utilisent les mêmes gestionnaires d'événements, il est donc plutôt facile de basculer entre eux.
Ils sont les mêmes, vous pouvez faire quelque chose comme ceci:
<asp:Button ID="SearchButton" runat="server" CssClass="addButtonStyle" OnClick="SearchButton_Click"
Text="Go " Width="60px" />
some style:
.addButtonStyle {
border: 1px solid #e1ecfc;
background-color: #B9D1F4;
color: #003399;
background-image: url(partgrad.gif);
background-repeat: repeat-x;
}
Je suis désolé, mais cela ne semble pas résoudre mon problème. La solution que vous avez publiée ne prend pas en compte l'animation de MouseOver, et il faudrait faire une image "partgrad.gif" qui correspondrait exactement à la taille du bouton ... cependant, je ne sais pas combien de lettres seront écrites la propriété Buton Text, puisqu'elle est contrôlée par le client. – Marco
Vous pouvez spécifier la largeur du bouton plutôt que de le mettre à l'échelle avec du texte. –
Ce n'est pas la même Wyatt, la technique à laquelle il fait référence nécessite un balisage supplémentaire et plusieurs images de fond associées à un seul bouton. Si nous divisons les cheveux, un bouton ne peut tout simplement pas faire l'affaire. Vous pouvez obtenir dans le stade, visuellement, mais si le but est la présentation visuelle pure, ASP: Button tombera court. –
Essayez cet exemple
ici ou afficher My Example Link
<!DOCTYPE html>
<html>
<head>
<title>Hello World | Button Config</title>
</head>
<body>
<div>
<h1>Working with Buttons</h1>
<p>Small, large, or medium size buttons can have css properties that you can benefit from rather that using images. Please look at the examples below</p>
<textarea>
<asp:button runat="server" id="helloWorld" CssClass="button" text=" --- See examples --- " />
</textarea>
<ol>
<li>
<input type="submit" class="button" value="This is a Long Button"/>
</li>
<li>
<input type="submit" class="button" value="Search Now!"/>
</li>
<li>
<input type="submit" class="button" value="Short"/>
</li>
</ol>
<ol>
<li>
<input type="submit" class="button round" value="This is a Long Button"/>
</li>
<li>
<input type="submit" class="button round" value="Search Now!"/>
</li>
<li>
<input type="submit" class="button round" value="Short"/>
</li>
</ol>
<p>
In theory you always want the cleanest markup. So linkButtons on are NO GO! LinkButtons are Javascript based and can cause accessibility issues.
</p>
<h3>IE doesn't have my rounded corners?</h3>
<p>
Gotcha, lets do it without JS and lets use the images found from the link below. IE doesnt take advantage of some of the cooler CSS tricks we find in other browsers. - Shame on them! In the next example we simply wrap the asp:button with a span and then a b element.
</p>
<ol>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="This is a Long Button"/>
</b>
</span>
</li>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="Search Now!"/>
</b>
</span>
</li>
<li>
<span id="btn-wrap">
<b>
<input type="submit" class="rounded" value="Short"/>
</b>
</span>
</li>
</ol>
<textarea>
<span id="btn-wrap">
<b>
<asp:button runat="server" id="helloWorld" text=" --- See examples --- " />
</b>
</span>
</textarea>
<h3>Wrapping it up</h3>
<p>
In this demo, you've seen a single background image used as a repeating object to give us a gradient effect similar to the one found here <a href="http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html">http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html</a>
</p>
<style>
input[type="submit"], span, b {background:transparent none repeat scroll 0 0;border:0 none;display:inline-block;margin:0;padding:0;cursor:pointer;outline:none;} /* reset the button */
input.button {background:url(http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/grid_navigator_bg.png) repeat-x; text-shadow:0 1px 1px #FFFFFF /* Just for looks */; padding:4px 5px;}
input.button:active {background:#FED58F;}
.round {-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;}
/* http://gfx2.hotmail.com/cal/11.00/updatebeta/ltr/grid_navigator_bg.png thank you hotmail for the image */
span#btn-wrap {background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_span.gif) repeat-x scroll 0 0;}
span#btn-wrap b {background:transparent url(http://www.oscaralexander.com/tutorials/img/bg_button_a.gif) no-repeat scroll right 0;height:18px;padding:3px 10px;}
span#btn-wrap:active {background-position: 0 -24px;}
span#btn-wrap:active b {background-position: right -24px;}
li {margin:5px 0;}
textarea {background:#323232; color:white; padding:10px; width:900px; height:80px; overflow:hidden;}
</style>
</div>
</body>
</html>
Comme la page dit, c'est la plus propre script java moins façon de le faire. Ceci est accessible et navigateur convivial.
À quel point les boutons de votre lien se dégradent-ils? Est-ce qu'ils fonctionnent sans JavaScript activé? –
Une excellente question. Cela fait un moment que je les utilise, mais la réalité est que la plupart des gens, et même de nombreuses entreprises, ne sont même pas dérangés par les utilisateurs handicapés JavaScript. Pouvons-nous nommer une plateforme qui n'a pas de capacité javascript plus récente que Windows Mobile 5.5? –
@Wyatt, quiconque navigue sur le net sans Javascript activé, ne peut plus rien faire. Je pense qu'il est temps de supposer que javascript est activé. –