Faire un bouton 3D avec bord arrondi

Je suis en train d'élaborer un site web dans lequel je veux mettre en œuvre en 3D des boutons avec des bords arrondis.Donc pour cela j'ai besoin de créer un fichier CSS.Je recherche beaucoup sur le bouton 3D, mais rien n'a fonctionné pour moi encore.

InformationsquelleAutor rick | 2012-07-07
  1. 4

    Ont un coup d'oeil à http://css3button.net/

    • Ce site et les boutons ne fonctionnent pas correctement dans l'Opéra. Toutefois, si vous exécutez le CSS généré par prefixr.com cela devrait fonctionner.
    InformationsquelleAutor Patrick Oscity
  2. 6

    Vous souhaitez utiliser une combinaison des éléments suivants styles css: border, border-radius, background, text-shadow et enfin box-shadow.

    Pour obtenir l'effet 3D, avec eux, vous devez utiliser le dégradé valeur sur le background style.

    Il est un outil utile pour la fabrication de la croix-navigateur dégradé css ici: http://www.colorzilla.com/gradient-editor/

    Et voici quelques exemple CSS qui peuvent style un a tag:

    .button {
display: block;
height: 30px;
margin-bottom: 10px;
text-align: center;
line-height: 30px;
width: 150px;
margin: 20px;
color: #FFF;
text-align: center;
border: solid #427AA8 1px;
border-radius: 5px;
text-decoration: none;
/* Gradient */
background: #427AA8;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzU5YTNlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MjdhYTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #59A3E0 1%, #427AA8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#59A3E0), color-stop(100%,#427AA8));
background: -webkit-linear-gradient(top,  #59A3E0 1%,#427AA8 100%);
background: -o-linear-gradient(top,  #59A3E0 1%,#427AA8 100%);
background: -ms-linear-gradient(top,  #59A3E0 1%,#427AA8 100%);
background: linear-gradient(to bottom,  #59A3E0 1%,#427AA8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59A3E0', endColorstr='#427AA8',GradientType=0 );
text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
box-shadow: 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);
}
.button:hover {
background: #59A3E0;
text-decoration: none;
filter: none;
}​
<a href="#" class="button">Example Button</a>

    Et l'exemple de ce que vous pouvez faire: jsfiddle.net/UPTyw

    Cela fonctionne bien avec tous les navigateurs modernes et ok avec IE8-6 (qui ne prennent pas en charge border-radius). De plus, cette méthode n'utilise pas les images.

    Aussi checkout cette question, Google est sans images Boutons, qui explique comment Google ont créé leur gamme de CSS boutons.

    IE9 Bug

    IE9 a un bug avec le rendu border-radius si filter est réglé. La solution est d'ajouter le suivant IE9 seulement CSS à tous les éléments à l'aide des gradients css.

    <!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
    InformationsquelleAutor Samuel Parkinson
  3. 0

    Essayer http://www.cssbuttongenerator.com/

    Lorsque vous avez terminé votre style de bouton, cliquez dessus et le CSS correspondant apparaît dans la case en bas.

    InformationsquelleAutor Ignitor
  4. 0
    <style>
button {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
</style>
<button>Test</button>

    Voir: http://jsfiddle.net/wPcn3/

    InformationsquelleAutor Leo