Méthode de rendu des coins arrondis sur les boutons de soumission de formulaire

Ce que je cherche est une méthode propre pour arrondir les coins de toutes les entrées avec la classe "soumettre". J'ai expérimenté un certain nombre de techniques javascript, mais aucune n'a bien fonctionné pour les éléments de formulaire. Pure CSS serait bien, mais, notez, le bouton doit se développer, et aura du texte arbitraire. D'autres méthodes exigeaient un vilain HTML hideux autour des entrées, ce que je ne veux pas.Méthode de rendu des coins arrondis sur les boutons de soumission de formulaire

Des idées?

Source

2009-04-23 Buzz

Essayez CurvyCorners (30100 octets, minified) pour cette solution car navigateur IE ne le fera pas arrondi. Je n'ai pas essayé d'ajouter une image cependant.

<style type="text/css"> 
.input-rounded-button { 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    border: 1px solid gray; 
    padding:0 3px 0 3px; 
    display:inline-block; 
    text-decoration:none; 
    background:#595651; 

    color:#FFFFFF; 
    cursor:pointer; 
    font:11px sans-serif; 
} 

.input-rounded-button:hover { 
    text-decoration:none; 
    color:#ADD8E6; 
    cursor:pointer; 
    border:1px solid #FF2B06; 
} 
</style> 

<input class="input-rounded-button" type="button" value="SEARCH" />

Source

2009-07-30 10:16:12 marknt15

IE plus récent devrait soutenir la méthode ci-dessus, sinon, pensez à ne pas les arrondir dans IE seulement. Je veux dire vraiment, obtenir avec les normes déjà! – mahalie

merci l'homme - cela m'aide beaucoup! –

Je l'ai utilisé cette méthode pendant un certain temps -

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

Il fonctionne assez bien

Source

2009-04-23 16:42:07 danpickett

+1 Génial. Je l'ai utilisé pendant un moment. Pure CSS, fonctionne juste. –

Cela ressemble à une ancre et ne semble pas supporter l'échelle verticale. Ou ai-je oublié quelque chose? – Buzz

Il vous manque quelque chose - cette méthode peut être étendue pour supporter l'élément bouton - http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/ N'oubliez pas de spécifier un type de bouton = "submit" pour IE. Je n'ai pas trouvé quelque chose avec mise à l'échelle verticale, ou en ai eu besoin. – danpickett

Peut-être que celui-ci est le genre de solution de contournement que vous recherchez. Bien qu'il ne prenne pas en charge la mise à l'échelle verticale. (Pourquoi diable ne vous avez soumettre multiligne boutons?)

http://www.hedgerwow.com/360/dhtml/ui-css-input-replacement/demo.php

Il est spécialisé pour les soumettre boutons et prend en charge une gamme de navigateur assez raisonnable.

Source

2009-07-30 11:13:47 Hurix

lol ... je n'ai pas de boutons de soumission multi-ligne, mais si un utilisateur zoome, je ne veux pas que les boutons se cassent. – Buzz

404 erreur sur ce lien. –

Existe-t-il un miroir de cette page? – UpTheCreek

Si vous êtes en mesure d'utiliser CSS3, la meilleure façon que je sais est juste de le faire:

.button 
{ 
    background-color:#f57070; 
    border-radius: 10px; //-rounding the edges, only available in CSS3-// 
    font-family:arial; 
    font-size:30px; 
    text-decoration:none; 
}

avec le code html:

<a href=# class='button'>...</a>

fait une belle touche rouge arrondie bords.

Source

2012-04-20 21:05:15 corey

Méthode de rendu des coins arrondis sur les boutons de soumission de formulaire

Répondre

Questions connexes