Une farandole de bouton

Documentations et Dossiers Une farandole de bouton

hight_tower

Modérateur

Rang

Inscrit le : 17/09/2009 à 11h09

Messages: 2298

Le 29/12/2012 à 16h11

Créer un fichier index.html est placer le code suivant:

Code HTML :

<!DOCTYPE html> 
<html> 
<head> 
<title>bouton</title> 
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="index.html" class="bouton">bouton 1</a><br><br>
<a href="index.html" class="bouton normal">bouton 2</a><br><br>
<a href="index.html" class="bouton gros">bouton 3</a><br><br>
<a href="index.html" class="bouton gros anis">bouton 4</a><br><br>
<a href="index.html" class="bouton normal bleu">bouton 5</a><br><br>
<a href="index.html" class="bouton gros rouge">bouton 6</a><br><br>
<a href="index.html" class="bouton normal rond bleu">bouton 6</a><br><br>
<a href="index.html" class="bouton gros basrond anis">bouton 7</a><br><br>
<a href="index.html" class="bouton gros idee rouge">bouton 8</a><br><br>
<a href="index.html" class="bouton gros rond topdegradbleu">bouton 9</a><br><br>
<a href="index.html" class="bouton normal idee topdegradrouge">bouton 10</a><br><br>
<a href="index.html" class="bouton normal idee bleu icon1">bouton 11</a><br><br>
<a href="index.html" class="bouton normal basrond topdegradrouge icon1 icon2">bouton 12</a><br>
<a href="index.html" class="bouton normal rond topdegradbleu ombre">bouton 13</a><br><br>
<a href="index.html" class="bouton gros idee anis txtombre">bouton 14</a><br><br>
<a href="index.html" class="bouton normal idee rouge ombre hover1">bouton 15</a><br><br>
<a href="index.html" class="bouton normal basrond rouge hover2">bouton 16</a><br><br>
<a href="index.html" class="bouton normal rond topdegradbleu hover2 ombre activ1">bouton 17</a><br><br>
</body>
</html>

Créer un fichier styles.css et mettez le code ci suivant:

Code CSS :

.bouton{
text-decoration: none;
display:inline-block;
vertical-align:middle;
}
 
.bouton.normal{
border :2px solid;
padding : 2px 5px;
}
 
.bouton.gros{
border :4px solid;
font-size: 24px;
font-weight:bold;
padding : 5px 12px;
}
 
.bouton.anis{
color: #879211;
background-color: #e2f51e;
border-color : #879211;
}
 
.bouton.bleu{
color: #feffff ;
background-color: #057db9;
border-color : #184c88 ;
}
 
.bouton.rouge{
color: #feffff ;
background-color: #ff6f00;
border-color : #f50a0a ;
}
 
.bouton.rond{
padding : 2px 10px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
 
.bouton.basrond{
padding : 2px 10px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
 
.bouton.idee{
padding : 2px 10px;
-webkit-border-radius: 20px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 20px;
-moz-border-radius-bottomleft: 0;
border-radius: 20px;
border-bottom-left-radius: 0;
}
 
.bouton.topdegradbleu {
background: #057db9; /* pour Ie qui gere mal les degradés */
background: -webkit-gradient(linear, left top, left bottom, from(#057db9), to(#184c88));
background: -moz-linear-gradient(top,  #057db9,  #184c88);
color: #feffff ;
border-color : #184c88 ;
}
 
 
.bouton.topdegradrouge {
background: #ff6f00; /* pour Ie qui gere mal les degradés */
background: -webkit-gradient(linear, left top, left bottom, from(#ff6f00), to(#f50a0a));
background: -moz-linear-gradient(top,  #ff6f00,  #f50a0a);
color: #feffff ;
border-color : #f50a0a ;
}
 
.bouton.icon1:before {
content: ""url(icone1.png)" ";
 }
 
 .bouton.icon2:after {
content: ""url(icone2.png)" ";
 }
 
 .bouton.ombre {
  -webkit-box-shadow:1px 1px 10px 5px black;
  -moz-box-shadow:1px 1px 10px 5px black;
  -o-box-shadow:1px 1px 10px 5px black;
  box-shadow:1px 1px 10px 5px black;
 }
 
  .bouton.txtombre {
 text-shadow:2px 2px 2px black,-2px -2px 2px white;
 }
 
.bouton.hover1:hover {
 box-shadow:1px 1px 5px 2px black inset;
 }
 
.bouton.hover2:hover {
padding : 2px 10px;
-webkit-border-radius: 20px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 20px;
-moz-border-radius-bottomleft: 0;
border-radius: 20px;
border-bottom-left-radius: 0;
 }
 
.bouton.activ1:active{
 box-shadow:1px 1px 5px 2px black inset;
}

Télécharger ces deux images et placez les à la racine de vos fichiers:
Farandole.zip

Vous ne pensez rien voir, que du contraire, ceux sont les boutons 11 & 12 avec une transparence et une couleurs recadrée autour

Voici le résultat obtenu: