comment changer la forme de bouton soumettre pour cercle [dupliquer]

StackOverflow https://stackoverflow.com//questions/11671429

Question

Double Possible:
Tracer le Cercle à l'aide de css seul

Je voudrais savoir si il existe un moyen de changer la forme du bouton envoyer, à partir de rectangle de forme circulaire??

Je ne veux pas utiliser une circulaire shapped image de la solution. Je veux que toutes les autres caractéristiques du bouton de la feuille de style css.

Était-ce utile?

La solution

Votre question est déjà répondu, mais je vous recommande Twitter Bootstrap.

C'est un code HTML/CSS framework qui vous permet de vous faire grands boutons (parmi d'autres) facilement.

Ces boutons sont "crossbrowser", ce qui signifie qu'ils sont compatibles avec Internet Explorer.

Avec une seule classe - btn - vous pouvez styliser un <button>, <input type="button"> ou <a>.

Ce :

<button class="btn"></button>

Donne:

enter image description here

Vous pouvez également personnaliser votre bouton rapidement avec une option de classe :

btn-primary, btn-info, btn-success, btn-warning, btn-danger et btn-inverse.

Cette classes transformer votre bouton comme ça :

enter image description here

Ensuite, vous pouvez choisir une taille avec les classes btn-large, btn-small et btn-mini.

Enfin, vous pouvez ajouter une icône (la liste est ici) dans le bouton.

Ce:

<button class="btn btn-success">
    <i class="icon-shopping-cart icon-white"></i>
    <span>Checkout</span>
</button>

Donne:

enter image description here

Amusez-vous avec vos nouveaux boutons. :)

Autres conseils

Utilisez border-radius Propriété.

Exemple: 

.button {
    width: 100px;
    height: 100px;
    background-color: #000;
    border: solid 1px #000;
    border-radius: 50%
}

L'exemple ci-dessus vous donnera un cercle régulier.

Si vous voulez juste une petite forme arrondie, essayez ceci: 

.button {
    width: 100px;
    height: 30px;
    background-color: #000;
    border: solid 1px #000;
    border-radius: 5px
}

Démo en direct: Cercle normal
Démo en direct: Forme arrondie
Démo en direct: bouton d'entrée avec texte

Utilisez le rayon de frontière CSS.Je recommanderais Googling 'CSS Button Generator' ou telle et trouver un nombre quelconque de boutons générant des outils que vous pouvez jouer avec pour obtenir le droit CSS.Vous auriez juste besoin de vous assurer de la hauteur de l'élément= largeur, puis de régler les rayons de coin en conséquence.

Utilisez ce style: 

input[type='submit'] {
    width:100px;
    height:100px;
    border-radius:50px;
}​

Vous pouvez utiliser des frontières dans votre CSS, mais il ne sera pas pris en charge dans IE.

Jouer avec: - 

border-radius: 10px 10px 10px 10px

Je suggérerais d'utiliser l'interface utilisateur de JQuery (vous pouvez vous faire votre propre thème) http://jqueryui.com/themeroller/

ou

CSS3 http://webdesignerwall.com/taturials/css3-gradient-buttons

CSS3 ne fonctionnera pas dans IE.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top