Skip to content

Instantly share code, notes, and snippets.

@CrandellWS

CrandellWS/index.html

Last active January 4, 2017 12:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CrandellWS/d4bce4d971780635617fb211aeeccfcf to your computer and use it in GitHub Desktop.
Save CrandellWS/d4bce4d971780635617fb211aeeccfcf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.spinBtn{
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgba(245,5,5,1);
font-family: 'Yanone Kaffeesatz';
font-weight: 900;
font-size: 4em;
display: block;
padding: 4px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 2px solid #f5f5f5;
-webkit-border: 2px solid #f5f5f5;
-moz-border: 2px solid #f5f5f5;
-webkit-box-shadow: 10px 15px 0px 2px rgba(100,100,100,1), 5px 10px 25px rgba(0,0,0,.7);
-moz-box-shadow: 10px 15px 0px 2px rgba(100,100,100,1), 5px 10px 25px rgba(0,0,0,.7);
box-shadow: 10px 15px 0px 2px rgba(100,100,100,1), 5px 10px 50px rgba(0,0,0,.7);
margin: 50px auto;
width: 260px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.spinBtn:active {
-webkit-box-shadow: 0px 3px 0px rgba(245,205,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(245,205,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(245,205,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
left: 6px;
}
</style>
</head>
<body>
<a id="aSpinImg" class="spinBtn" title="Spin To Win" href="#">
Button
<br>To
<br>Click
</a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment