login
administrateur
login
Le 25 mai 2013 à 15 h 40 min   
Survoler à l’aide de votre souris pour voir le résultat   –   Code HTML…

 

<div id="header-buttons">
    <a class="round-button" id="homebtn" title="" href=""></a>
    <a class="round-button" id="mailbtn" title="" href="">&nbsp;</a>
    <a class="round-button" id="newsbtn" title="" href="" >&nbsp;</a>
    <a class="round-button" id="regbtn"  title="" href="">&nbsp;</a>

Code CSS
#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
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 »

  1. No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Vous devez vous connecter pour publier un commentaire.

Propulsé par WordPress   |   Personnalisé par Webinnov
Haut de page