Skip to content

Instantly share code, notes, and snippets.

@highsmithcodes

highsmithcodes/Test Buttons.markdown

Created June 30, 2016 09:06
Show Gist options
  • Save highsmithcodes/70c6b78722d5a07a3729677b75f0195e to your computer and use it in GitHub Desktop.
Save highsmithcodes/70c6b78722d5a07a3729677b75f0195e to your computer and use it in GitHub Desktop.
Download ZIP
Test Buttons
Raw
index.html
<html lang="en">
<head>
<meta name="author" content="www.twitter.com/cheeriottis">
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/core.css">
</head>
<body>
<a href="#" class="action-button shadow animate blue">This</a>
<br>
<a href="#" class="action-button shadow animate red">Is</a>
<br>
<a href="#" class="action-button shadow animate green">A</a>
<br>
<a href="#" class="action-button shadow animate yellow">Test</a>
<br>
</body>
</html>
Raw
style.css
body{
margin-top: 100%;
padding: 50px;
margin: auto;
width: 30%;
}
.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: 10px;
font-family: 'Roboto Mono';
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment