Survoler à l’aide de votre souris pour voir le résultat – Code HTML…
|
1 2 3 4 5 |
<div id="header-buttons"> <a class="round-button" id="homebtn" title="" href=""></a> <a class="round-button" id="mailbtn" title="" href=""> </a> <a class="round-button" id="newsbtn" title="" href="" > </a> <a class="round-button" id="regbtn" title="" href=""> </a> |
Code CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
#header-buttons{ position:absolute; width:285px; top:-37px; left:-59px; margin-left: 85px; margin-top:85px; } a.round-button{ width:54px; height:54px; text-decoration:none; border-radius:25px; background-color: transparent; background-image: url(../images/icon-pastel.png); background-repeat: no-repeat; background-position: -5px -5px; -moz-border-radius:25px; -webkit-border-radius:25px; -khtml-border-radius:25px; } #header-buttons a{ position:absolute; top:-25px } #homebtn{ background-position:0px -64px } #homebtn:hover,#homebtn:active{ background-position:0px 0px } #mailbtn{ background-position:-56px -64px; left:75px; } #mailbtn:hover,#mailbtn:active{ background-position:-56px 0px; } #newsbtn{ background-position:-111px -64px; left:150px; } #newsbtn:hover,#newsbtn:active{ background-position:-111px 0px } #regbtn{ background-position:-166px -64px; left:225px; } #regbtn:hover,#regbtn:active{ background-position:-166px 0px } |
Code CSS : Animation
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
a.round-button{ -moz-transition-property:background-position; -moz-transition-duration:.3s; -moz-transition-timing-function:ease-out; -webkit-transition-property:background-position; -webkit-transition-duration:.3s; -webkit-transition-timing-function:ease-out; -o-transition-property:background-position; -o-transition-duration:.3s; -o-transition-timing-function:ease-out; transition-property:background-position; transition-duration:.3s; transition-timing-function:ease-out } |
David LAURENT
Aucun commentaire