Petit essai : le bouton avec HTML5/CSS3

Voici un petit essai pour faire un bouton en html5 avec du CSS3.

<html>
<head>
        <title>button css3</title>
        <style type="text/css">
.button{
    /*style du paragraphe*/
    font-family:Book Antiqua,sans-serif;/*police utilisée*/
    font-size:2em;/*taille de la police*/
    width:800px;
    height:60px;
    padding-top:5px; /*permet le centrage vertical*/
    text-align:center;
    color:#222;
    background:#58ACFA;
    background:-moz-linear-gradient(top,#CDE7F5,#58ACFA);/*dégradé du bouton*/
    background:-webkit-gradient(linear, left top, left bottom, from(#CDE7F5), to(#58ACFA));
    /*arrondis du bouton*/
        -webkit-border-radius:8px;
        -moz-border-radius:8px;
            border-radius:8px;
}
/*over c'est quand la souris passe dessus*/
:hover.button{
    color:#555;
    background:#58D3F7;
    background:-moz-linear-gradient( top, #CEECF5, #58D3F7);
    background:-webkit-gradient( linear, left top, left bottom, from(#CEECF5), to(#58D3F7));
}
/*active c'est quand on clique sur le bouton*/
:active.button{
    color:#555;
    background:url(http://www.google.com) no-repeat;
    background:#444;
    background:-moz-linear-gradient( top, #CEECF5, #58D3F7);
    background:-webkit-gradient( linear, left top, left bottom, from(#CEECF5), to(##58D3F7));
    -webkit-box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
       -moz-box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
            box-shadow:1px 1px 10px black inset, 0 1px 0 rgba(255,255,255,0.4);
</style>
 <script type="text/javascript" src="js/modernizr.custom.29473.js"></script>
</head>
  <body>
      <a href="http://www.google.com"  style="text-decoration: none;"><span>Google</span></a>

  </body>
</html>

N.B :

Vous pouvez vous simplifier la vie on mettant la balise <style> de cette façon :

<link rel="stylesheet" type="text/css" href="css/style.css" />

Vous placez le fichier HTML dans votre dossier puis vous créez un document CSS ou vous placerez tous vos document .CSS. C’est l’avantage du CSS !🙂

Exemple : Mon dossier s’appelle Bouton, dedans je peux y trouver le fichier intitulé  index.html ainsi qu’un dossier appelé CSS dans lequel j’y trouve le fichier style.css.D’où :  href css/style.css.

(Sinon style.css était dans le fichier toto : href toto/style.css)

Remarque :  link ou style c’est pareil Avec style vous faîtes si je ne me trompe pas <style type… href../>

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s