Back home

Experimental call to action button

The Markup

  
	Preview
	Download PDF	
						

CSS

.button {
	margin-left:-150px;
	background:#e5ddcb;
	display:block;
	text-align:center;
	text-decoration:none;
	font: 34px/300px 'Armata', sans-serif;
	position:relative;
}

.button em{
	position:relative;
	z-index:10;
	color:#e5ddcb;
	
    -webkit-transition: all 300ms ease-in-out 0s;
       -moz-transition: all 300ms ease-in-out 0s;
    		transition: all 300ms ease-in-out 0s;
}

.button:hover em{
	opacity:0;
}

.button,
.button span,
.button strong{
	width:300px;
	height:300px;	
}

.button,
.button *{
    border-radius: 50%;	
}

.button span,
.button strong{
	margin:-150px 0 0 -150px;
	position:absolute;
	top:50%;
	left:50%;
}

.button span{
	background:#a7c5bd;
		
	-webkit-transform:scale(0.9);
	   -moz-transform:scale(0.9);
	        transform:scale(0.9);
	
       -moz-transition: all 600ms ease-in-out 0s;
    -webkit-transition: all 600ms ease-in-out 0s;
    		transition: all 600ms ease-in-out 0s;	
}

.button strong{
	opacity:0;
	background:#749189;
	color:#e5ddcb;	
	
	-webkit-transform:scale(0.2);
	   -moz-transform:scale(0.2);
			transform:scale(0.2);

    -webkit-transition: all 400ms ease-in-out 250ms;
       -moz-transition: all 400ms ease-in-out 250ms;
    		transition: all 400ms ease-in-out 250ms;		
}

.button:hover span{
	-webkit-transform:scale(1.0);
	   -moz-transform:scale(1.0);
			transform:scale(1.0);	
}

.button:hover strong{
	opacity:1;
	-webkit-transform:scale(0.9);
	   -moz-transform:scale(0.9);
	        transform:scale(0.9);
}