Création d’un bouton en remplaçant l’image par du Pur Css

administrateur

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;			
}

.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;
}

#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;		
}

.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;
}

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;
}

.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	
}

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>

<a class="text" href="" title="Allez à la page suivante">Suivant</a>

</div>

Créé par David LAURENT | TMI | Webinnov™

Commentaires fermés classé dans : CSS3

Aucun commentaire

No comments yet.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

L	M	M	J	V	S	D
						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

Le Blog de Webinnov

Création d’un bouton en remplaçant l’image par du Pur Css

Aucun commentaire