<div class="container">
<a class="button" href="#0">One</a>
<a class="button" href="#0">Two</a>
<a class="button" href="#0">Three</a>
<a class="button" href="#0">Four</a>
<a class="button" href="#0">Five</a>
</div>
$height:65;
$depth:6;
$color:#7fbb98;
$text-color:darken($color,10%);
$lighten-on-hover:7%;
$button-speed:.06;
$timing-function: ease-out;
body, html {
height:100%;
margin:0;
}
body {
background:#D7702B;
display:flex;
}
.container {
margin:auto;
}
.button {
cursor:pointer;
margin-left:5px;
margin-bottom:15px;
text-shadow:0 -2px 0 darken($color,20%),0 1px 1px lighten($color,20%) ;
box-sizing:border-box;
font-size:2em;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration:none;
font-weight:bold;
color:$text-color;
&:visited {
color:$text-color;
}
height:$height+px;
line-height:$height+px;
padding: 0 (($height/2)+px);
display:inline-block;
width:auto;
background: linear-gradient(to bottom,
saturate(lighten($color,15%),35%) 0%,
saturate(lighten($color,12%),15%) 26%,
$color 100%);
border-radius:5px;
border-top:1px solid lighten($color,22%);
border-bottom:1px solid lighten($color,20%);
top:0;
transition:all ($button-speed + s) $timing-function;
position:relative;
}
.button:hover {
background: linear-gradient(to bottom,
lighten(saturate(lighten($color,15%),35%),$lighten-on-hover) 0%,
lighten(saturate(lighten($color,12%),15%),$lighten-on-hover) 26%,
lighten($color,$lighten-on-hover) 100%);
}
.button:active {
top:$depth+px;
text-shadow:0 -2px 0 darken($color,0%),0 1px 1px lighten($color,20%), 0 0 4px white ;
color:lighten($color,45%);
&:before {
top:0;
box-shadow: 0 3px 3px rgba(0,0,0,.7),0 3px 9px rgba(0,0,0,.2);
}
}
.button:before {
display:inline-block;
content:'';
position:absolute;
left:0;
right:0;
z-index:-1;
top:($depth)+px;
border-radius:5px;
height:($height)+px;
background: linear-gradient(to top,
saturate(darken($color,40%),15%) 0%,
saturate(darken($color,25%),10%) $depth+px);
transition:all (($button-speed*1.3) + s) $timing-function;
box-shadow:
0 1px 0 2px rgba(0,0,0,.3),
0 5px ($depth*.4+px) rgba(0,0,0,.5),
0 ($depth*1.8+px) 9px rgba(0,0,0,.2);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.