Comment puis-je faire carré les coins d'un bouton d'envoi? Peut-on faire avec CSS? Je viens de remarquer que les boutons Stackoverflow sont à peu près la même chose (ne le fermez pas pour mentionner, je veux simplement illustrer ce que je veux dire).
6 Réponses :
Vous pouvez utiliser l'élément HTML au lieu du type d'entrée. C'est assez facile de styler celui-là.
Je ne suis pas vraiment sûr de ce que tu veux dire. Mon HTML ressemble à ce
Il y a un bouton HTML de bouton et c'est une sorte de div. Jetez un coup d'œil à ce merveilleux article: carteltreee.com/features/rediscouvering-the-button -Element
Utiliser bordure: 1px solide pour l'élément.
Ajoutez simplement CSS à celui-ci, et le look par défaut disparaîtra.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
[TYPE = BOUTON] Peut ne pas toujours être pris en charge sur certains navigateurs. Vous êtes donc souvent préférable d'appliquer une classe à tous les boutons que vous voulez, de cette façon ...
N'est-il pas préférable de fournir un nom de classe pour cela?
Oui, je venais de démontrer un moyen rapide de la configurer .. Ce type de sélecteur est pris en charge sur presque tous les navigateurs après IE6, cependant, il pourrait donc ne pas être un problème. Mais il serait bien entendu préférable d'utiliser des cours si vous êtes concerné par de vieux navigateurs.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.
Si vous spécifiez la hauteur et la largeur de la CSS, vous ferez la place des coins et conserverez le niveau de certains boutons de fantaisie automatiques ... et de cette façon, vous n'aurez pas à construire votre propre .
input.button, input.submit {
height: 30px;
width: 20px;
}
Utilisez le champ et la commande suivantes dans votre CSS:
border-radius:0px
Je pense que regarder la source de so aurait été aussi rapide;).