Just some simple buttons :)
A Pen by Nuno Ferreira on CodePen.
<html lang="en"> | |
<head> | |
<meta name="author" content="www.twitter.com/cheeriottis"> | |
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> | |
<link rel="stylesheet" href="css/core.css"> | |
</head> | |
<body> | |
<a href="#" class="action-button animate blue">Hello</a> | |
<a href="#" class="action-button animate red">How</a> | |
<a href="#" class="action-button animate green">Are</a> | |
<a href="#" class="action-button animate yellow">You?</a> | |
</body> | |
</html> |
body | |
{ | |
padding: 50px; | |
} | |
.animate | |
{ | |
transition: all 0.1s; | |
-webkit-transition: all 0.1s; | |
} | |
.action-button | |
{ | |
position: relative; | |
padding: 10px 40px; | |
margin: 0px 10px 10px 0px; | |
float: left; | |
border-radius: 8px; | |
font-family: 'Pacifico', cursive; | |
font-size: 25px; | |
color: #FFF; | |
text-decoration: none; | |
} | |
.blue | |
{ | |
background-color: #3498DB; | |
border-bottom: 5px solid #2980B9; | |
text-shadow: 0px -2px #2980B9; | |
} | |
.red | |
{ | |
background-color: #E74C3C; | |
border-bottom: 5px solid #BD3E31; | |
text-shadow: 0px -2px #BD3E31; | |
} | |
.green | |
{ | |
background-color: #82BF56; | |
border-bottom: 5px solid #669644; | |
text-shadow: 0px -2px #669644; | |
} | |
.yellow | |
{ | |
background-color: #F2CF66; | |
border-bottom: 5px solid #D1B358; | |
text-shadow: 0px -2px #D1B358; | |
} | |
.action-button:active | |
{ | |
transform: translate(0px,5px); | |
-webkit-transform: translate(0px,5px); | |
border-bottom: 1px solid; | |
} |