login
administrateur
login
Le 18 juin 2014 à 23 h 40 min   
Création du bouton

.button{
    float:right;
	width:150px;
	height:50px;
	margin-right:32px;
	background: linear-gradient(#4B4B4B, #3C3C3C);
	-moz-box-shadow: 0px 2px 3px #716d73;
	-webkit-box-shadow: 0px 2px 3px #716d73;
	box-shadow: 0px 2px 3px #716d73;
	filter: progid:DXImageTransform.Microsoft.Shadow(strength = 2, direction = 180, color = '#716d73');
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 2, Direction = 180, Color = '#716d73')";
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;			
}
Création du cercle
#cercle{
	background: linear-gradient(#414141, #545454);
	border-radius:50%;
	width:20px;
	height:20px;
	-webkit-box-shadow: inset 2px 2px 3px 1px rgba(0, 0, 0, 0.55);
	-moz-box-shadow:    inset 2px 2px 3px 1px rgba(0, 0, 0, 0.55);
	box-shadow:         inset 2px 2px 3px 1px rgba(0, 0, 0, 0.55);
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-right-style: solid;
	border-right-color: #999;
	border-bottom-color: #999;
}
Intégration du cercle
.button_cercle{
	float:right;
	padding:15px 15px 15px 5px;		
}
Ajout de la flèche
span {
	position:absolute;
	color: #c7bfc0;
	padding-left: 9px;
	font-family: 'euphemiaregular', Arial, sans-serif;
	font-size: 10px;
	padding-top:3px;
	opacity:0.7;
}
Insérer le texte
.text{
	float:left;
	font-family: 'Artifika', Verdana,Geneva,sans-serif;
	padding:17px 0 0 20px;
	font-size:15px;
	height: 25px;
}
Effet sur texte
a{
	color: #A2A2A2;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 200ms ease 0s;
}

a:hover{
	color:#FFF	
}
Pour finir le code HTML
<div class="button">
    
	<a class="text" href="" title="Allez à la page suivante">Suivant</a>
			  
		<div class="button_cercle">
            
			<div id="cercle"><span>></span></div>
                
		</div>
</div>

Lunette

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