<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Some Responsive Buttons</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="button">
<i class="fa fa-bars" aria-hidden="true"></i>
<div class="text"> Settings</div>
</div>
<div class="button">
<i class="fa fa-random" aria-hidden="true"></i>
<div class="text"> Random</div>
</div>
<div class="button">
<i class="fa fa-download" aria-hidden="true"></i>
<div class="text"> Download</div>
</div>
<div class="button">
<i class="fa fa-envelope" aria-hidden="true"></i>
<div class="text"> Messages</div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
@import url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
@font-face {
font-family: hipster;
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/monohipster.otf);
}
body {
background: #1D1F20;
margin: 0 auto;
}
.button {
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
background: #2a2d35;
background: -moz-linear-gradient(left, #2a2d35 0%, #353742 100%);
background: -webkit-linear-gradient(left, #2a2d35 0%, #353742 100%);
background: linear-gradient(to right, #2a2d35 0%, #353742 100%);
border-color: #404454 white black red;
border-style: solid;
border-width: 2px 0px 2px 0px;
color: #00FFAD;
cursor: pointer;
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2a2d35', endColorstr='#353742', GradientType=1);
font-size: 35px;
height: 76px;
line-height: 76px;
text-align: center;
text-shadow: 0px -2px 1px #23252B, 0px 2px 2px #23252B, 0px 0px 20px #049B6A;
width: 80px;
}
.text {
cursor: pointer;
font-family: hipster;
font-size: 25px;
height: 76px;
line-height: 76px;
margin-top: -76px;
opacity: 0;
position: relative;
text-align: center;
text-shadow: none;
width: 80px;
}
.button {
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.button:hover {
background: #393c47;
background: -moz-linear-gradient(left, #393c47 0%, #4a4e5b 100%);
background: -webkit-linear-gradient(left, #393c47 0%, #4a4e5b 100%);
background: linear-gradient(to right, #393c47 0%, #4a4e5b 100%);
color: #FFD5A0;
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#393c47', endColorstr='#4a4e5b', GradientType=1);
font-size: 45px;
text-shadow: 0px 0px 20px #FF8E00, 0px 2px 0px #23252B, 0px -1px 0px #23252B;
}
.button:active {
color: #FFE9CD;
text-shadow: 0px 0px 20px #FFB100, 0px 0px 5px #FFB100;
}
.text {
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
.text:hover {
color: white;
font-family: hipster;
opacity: 1;
text-shadow: none;
width: 280px;
}
// also includes click animation