Créer un bouton CSS3 attrayant sans image

Accueil / Actus / Créer un bouton CSS3 attrayant sans image

Créer un bouton CSS3 attrayant sans image

Posté par Sébastien Bareyre le 19 mai 2011 / 1 Commentaire

Je vous propose aujourd’hui un tutoriel qui vous aidera à concevoir des boutons CSS3 sans avoir à utiliser d’image.

Ce bouton utilise les nouvelles propriétés CSS3 et est par conséquent uniquement compatible avec les navigateurs dit « modernes » (Firefox 3.6+, Safari 4+, Opera 11+, Chrome et enfin Internet Explorer 9).

N’hésitez pas à me dire ce que vous en pensez !

.button { 
   -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; 
   -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; 
   -o-box-shadow:inset 0px 1px 0px 0px #ffffff; 
   box-shadow:inset 0px 1px 0px 0px #ffffff; 
   background:-webkit-gradient( 
                        linear, 
                        left top, 
                        left bottom, 
                        color-stop(0.05, #ffffff), 
                        color-stop(1, #d1d1d1) 
                        ); 
   background:-moz-linear-gradient( 
                        center top, 
                        #ffffff 5%, 
                        #d1d1d1 100% 
                        ); 
   filter:progid:DXImageTransform.Microsoft.gradient(
                        startColorstr='#ffffff', 
                        endColorstr='#d1d1d1'
                        ); 
   background-color:#ffffff; 
   -moz-border-radius:6px; 
   -webkit-border-radius:6px; 
   -o-border-radius:6px; 
   border-radius:6px; 
   border:1px solid #dcdcdc; 
   display:inline-block; 
   color:#777777; 
   font-family:arial; 
   font-size:15px; 
   font-weight:bold; 
   padding:6px 24px; 
   text-decoration:none; 
   text-shadow:1px 1px 0px #ffffff; 
}
.button:hover { 
   background:-webkit-gradient( 
                        linear, 
                        left top, 
                        left bottom, 
                        color-stop(0.05, #d1d1d1), 
                        color-stop(1, #ffffff)
                        ); 
   background:-moz-linear-gradient(
                        center top, 
                        #d1d1d1 5%, 
                        #ffffff 100%
                        ); 
   filter:progid:DXImageTransform.Microsoft.gradient(
                        startColorstr='#d1d1d1', 
                        endColorstr='#ffffff'
                        ); 
   background-color:#d1d1d1; 
}
.button:active { 
   position:relative; top:1px; 
}

1	<a class="button" href="#">Mon bouton</a>

Demo :
Mon bouton

Commentaire pour Créer un bouton CSS3 attrayant sans image

Maximilien@www.hecbourse.com

6 yearss ago

Super ! Je trouve cela plus attrayant, interactif et c’est plus rapide au chargement, alors c’est tout benef ! Merci pour le partage du code :)

(Reply)

Créer un bouton CSS3 attrayant sans image