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 !

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>
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)



Leave a Reply

 

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.