KOMPOOS.NL

geanimeerde css buttons

home » css » css3-buttons.html

sitemap


voorbeeld css3 geanimeerde button

uitleg geanimeerde button

Met IE wil het nog niet "vlotten". De rest van de browsers heeft nauwelijks problemen meer om deze animatie te reproduceren (mits je geen oude versies gebruikt). De stylesheet moet je in de head-sectie van jouw pagina plaatsen, en de html-code hoort in de body-sectie thuis. Vergeet niet om onder de button iets de class "clear-both" te geven. Anders blijft de float:left nog van kracht...

html-code van de animated button


<ul class="animated-button">
        <li>
                <a href="/css/css3-buttons.html" class="css3-animated-button">
                        <span>
                                <span>
                                        <span>
                                                <sup>PUUR CSS<br />ZONDER<br />SCRIPTS</sup>
                                        </span>
                                </span>
                        </span>
                </a>
        </li>
</ul>

stylesheet van de css3 animated button


<style type="text/css">
        ul.animated-button{
                height:8em;
                list-style-type:none}
        .css3-animated-button{
                display:block;
                width:6em;
                height:6em;
                background:#fb0;
                color:inherit;
                -webkit-transform:rotate(-50deg);
                -moz-transform:rotate(-50deg);
                rotation:-50deg;
                text-align:center;
                -moz-transition:-moz-transform 0.3s ease;
                -webkit-transition:-webkit-transform 0.3s ease;
                -o-transition:-o-transform 0.3s ease;
                -ms-transition:-ms-transform 0.3s ease;
                transition:transform 0.3s ease}
        .css3-animated-button span{
                display:block;
                width:6em;
                height:6em;
                background:#fb0;
                -webkit-transform:rotate(25deg);
                -moz-transform:rotate(25deg);
                -o-transform:rotate(25deg);
                -ms-transform:rotate(25deg);
                rotation:25deg}
        .css3-animated-button:hover,.css3-animated-button:hover span{
                background:#ff6303;
                color:#fff;
                text-shadow:0 0 20px #fff, 0 0 8px #fff}
        .css3-animated-button:hover{
                -webkit-transform:rotate(315deg);
                -moz-transform:rotate(315deg);
                -o-transform:rotate(315deg);
                -ms-transform:rotate(315deg);
                rotation:315deg}
        .clear-both{
                clear:both}
</style>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.