Reproduire un bouton CSS3

Slinky
Les bases HTML/CSS

Bonjour à tous,

Par curiosité, je voudrais savoir comment les programmeurs ont fait les boutons facebook et si c'est possible de les refaire en CSS3 dans un input? Vici le site: http://kim.com/

4 réponses

Aureroy
Réponse acceptée

Télécharge firebug sous firefox, fait clique droit sur le bouton, inspectez l'élément et tu as leur CSS ;)

terra prime
Réponse acceptée

Bonjour,

Voici le code permettant de faire le bouton facebook :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        .share a{display:block;border:0;text-indent:-999em;overflow:hidden;background-color:transparent;background-repeat:no-repeat;text-align:left;direction:ltr;*line-height:0;width:100%;height:100%}
        .share.share-btn{cursor:pointer;float:left;border-radius:4px;margin-right:5px;position:relative;box-shadow:0 1px 3px 0 rgba(0,0,0,0.25),0 0 3px rgba(255,255,255,0.15) inset}
        .share .icon{position:relative;z-index:2}
        .share .bkg-1{border-radius:2px;position:absolute;top:4px;bottom:4px;left:4px;right:4px;z-index:1;filter:alpha(opacity=0);opacity:0}
        .mozilla .share .bkg-1.animation-out,.webkit .share .bkg-1.animation-out,.ie10 .share .bkg-1.animation-out{-moz-animation:share-transition-layer1-out .5s ease 0s 1 forwards;-webkit-animation:share-transition-layer1-out .5s ease 0s 1 forwards;-o-animation:share-transition-layer1-out .5s ease 0s 1 forwards;-ms-animation:share-transition-layer1-out .5s ease 0s 1 forwards;animation:share-transition-layer1-out .5s ease 0s 1 forwards}.share .bkg-2{border-radius:4px;position:absolute;top:0;bottom:0;left:0;right:0;z-index:0}
        .share:hover .bkg-1{filter:alpha(opacity=100);opacity:1;-webkit-transition:opacity .15s ease-in;-moz-transition:opacity .15s ease-in;-o-transition:opacity .15s ease-in;transition:opacity .15s ease-in}
        .mozilla .share:hover .bkg-1,.webkit .share:hover .bkg-1{-webkit-transition:none 1s;-moz-transition:none 1s;-o-transition:none 1s;transition:none 1s;-moz-animation:share-transition-layer1 .25s ease 0s 1 forwards;-webkit-animation:share-transition-layer1 .25s ease 0s 1 forwards;-o-animation:share-transition-layer1 .25s ease 0s 1 forwards;-ms-animation:share-transition-layer1 .25s ease 0s 1 forwards;animation:share-transition-layer1 .25s ease 0s 1 forwards}
        .share.share-facebook .icon{background:url('http://kim.com/bundles/triworkskimdotcomcommon/images/sprites/share-seaa93ace7e.png') 0 -105px;width:98px;height:35px}
        .share.share-facebook .bkg-1{background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,rgba(255,255,255,0.96)),color-stop(100%,#fff));background-image:-webkit-linear-gradient(rgba(255,255,255,0.96),#fff);background-image:-moz-linear-gradient(rgba(255,255,255,0.96),#fff);background-image:-o-linear-gradient(rgba(255,255,255,0.96),#fff);background-image:linear-gradient(rgba(255,255,255,0.96),#fff)}
        .lt-ie10 .share.share-facebook .bkg-1,.lt-ie9 .share.share-facebook .bkg-1{background-color:#fff}
        .share.share-facebook .bkg-2{background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#02c0f8),color-stop(100%,#02c0f8));background-image:-webkit-linear-gradient(#02c0f8,#02c0f8);background-image:-moz-linear-gradient(#02c0f8,#02c0f8);background-image:-o-linear-gradient(#02c0f8,#02c0f8);background-image:linear-gradient(#02c0f8,#02c0f8)}
        .lt-ie10 .share.share-facebook .bkg-2,.lt-ie9 .share.share-facebook .bkg-2{background-color:#02c0f8}
        .share.share-facebook:hover .icon{background:url('http://kim.com/bundles/triworkskimdotcomcommon/images/sprites/share-seaa93ace7e.png') 0 -35px}
    </style>
</head>
<body>
    <div class="share share-btn share-facebook">
        <div class="icon">
            <a href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fkim.com%2F" onclick="window.open('http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fkim.com%2F', 'share','toolbar=0,status=0,width=660,height=436'); return false;">Facebook</a>
        </div>
        <div class="bkg-1"></div>
        <div class="bkg-2"></div>
    </div>
</body>
</html>
duffJohn

Google chrome avec son module développement te le permet aussi ;)

Slinky
Auteur

Merci à tous. J'ai beaucoup appris sur les plugins disponibles dans les navigateurs!