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 !
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
.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> |
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 :)