Je cherche à faire des boutons avec coins arrondis, texte et dégradés en CSS3. J'ai testé mon code source sur Chrome, tout marche parfaitement. En revanche, pas moyen de faire le dégradé sur FireFox3. Idem pour les transitions, y compris sur Chrome.
Ne parlons pas de IE, je ferais un post à part quand tout fonctionnera sur Chrome et FF :D
Pour info, voici l'adresse du site.
www.api42.fr
et des bouts de code source
CSS*******************************************
div.gauche a
{
display: table-cell; vertical-align: middle; width: 125px; height: 45px; border: 2px #1b8bff solid; text-align: center; color: black; font-weight: bold; text-decoration: none;
/* Coins arrondis */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Ombre portée */
-moz-box-shadow: 4px 4px 12px 0 #333;
-webkit-box-shadow: 4px 4px 12px 0 #333;
box-shadow: 4px 4px 12px 0 #333;
/* Arrière Plan */
-moz-radial-gradient(45px 45px, 10px, 52px 50px, 30px, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(0.90, #019F62)) no-repeat,
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
background-attachment: scroll;
background-color: #1b8bff;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b8bff), color-stop(0.5, #dedede), to(#1b8bff));
background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background-repeat: repeat;
/******************************
Transitions
******************************/
/* Chrome */
-webkit-transition: background-image 2s linear;
/* Firefox */
-moz-transition-property: background-image;
-moz-transition-duration: 2s;
/* Standard */
transition-property: background-image;
transition-duration: 2s;
}
div.gauche a:hover
{
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dedede), color-stop(0.5, #1b8bff), to(#dedede));
}
HTML******************************************* <div class="gauche"> <a href="#">ACCUEIL</a><br> <a href="#">TARIFS</a><br> <a href="#">NEWS</a><br> <a href="#">CONTACT</a><br> <a href="#">PARTENAIRES</a> </div>
