Last active
December 25, 2015 21:05
-
-
Save egfx/72b40dfc0092949e3c8c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); | |
#arcade-button | |
{background-color: #F7F7F7;} | |
#arcade-button | |
.roundbtn { | |
width: 75px; | |
height: 75px; | |
border: 5px solid #9a9a9a; | |
display: inline-block; | |
background-color: #6c6161; | |
-moz-border-radius: 75px; | |
-webkit-border-radius: 75px; | |
border-radius: 75px; | |
-moz-transition: all 35ms linear; | |
-o-transition: all 35ms linear; | |
-webkit-transition: all 35ms linear; | |
transition: all 35ms linear; | |
-ms-transition: all 35ms linear; | |
-moz-user-select: -moz-none; | |
-ms-user-select: none; | |
-webkit-user-select: none; | |
user-select: none; | |
} | |
#arcade-button | |
.squarebtn { | |
width: 75px; | |
height: 75px; | |
border: 5px solid #9a9a9a; | |
display: inline-block; | |
background-color: #6c6161; | |
-moz-transition: all 35ms linear; | |
-o-transition: all 35ms linear; | |
-webkit-transition: all 35ms linear; | |
transition: all 35ms linear; | |
-ms-transition: all 35ms linear; | |
-moz-user-select: -moz-none; | |
-ms-user-select: none; | |
-webkit-user-select: none; | |
user-select: none; | |
-webkit-box-shadow: -5px -5px 40px 0px rgba(0, #arcade-button0, #arcade-button0, #arcade-button0.15); | |
-moz-box-shadow: -5px -5px 40px 0px rgba(0, #arcade-button0, #arcade-button0, #arcade-button0.15); | |
box-shadow: -5px -5px 40px 0px rgba(0, #arcade-button0, #arcade-button0, #arcade-button0.15); | |
} | |
/*DARK BTN*/ | |
#arcade-button | |
.roundbtn.dark { | |
border: 5px solid #333; | |
background-color: #000; | |
} | |
#arcade-button | |
.roundbtn.dark .inner { | |
background-color: #333; | |
} | |
#arcade-button | |
.roundbtn:active.dark .inner { | |
-moz-box-shadow: #000 0 8px 0 inset; | |
-webkit-box-shadow: #000 0 8px 0 inset; | |
box-shadow: #000 0 8px 0 inset; | |
} | |
/*COSSETTE BTN*/ | |
#arcade-button | |
.roundbtn.cossette { | |
border: 6px solid #000; | |
background-color: #E7E7E7; | |
} | |
#arcade-button | |
.roundbtn.cossette .inner { | |
background-color: white; | |
} | |
#arcade-button | |
.roundbtn:active.cossette .inner { | |
-moz-box-shadow: #e7e7e7 0 8px 0 inset; | |
-webkit-box-shadow: #e7e7e7 0 8px 0 inset; | |
box-shadow: #e7e7e7 0 8px 0 inset; | |
} | |
/*COSSETTE SQUARE BTN*/ | |
#arcade-button | |
.squarebtn.cossetteSQUARE { | |
border: 6px solid #000; | |
background-color: #c4c4c4; | |
} | |
#arcade-button | |
.squarebtn.cossetteSQUARE .inner { | |
background-color: #FFF; | |
} | |
#arcade-button | |
.squarebtn:active.cossetteSQUARE .inner { | |
-moz-box-shadow: #c4c4c4 0 8px 0 inset; | |
-webkit-box-shadow: #c4c4c4 0 8px 0 inset; | |
box-shadow: #c4c4c4 0 8px 0 inset; | |
} | |
/*RED BTN*/ | |
#arcade-button | |
.roundbtn.red { | |
border: 6px solid #000; | |
background-color: darkred; | |
} | |
#arcade-button | |
.roundbtn.red .inner { | |
background-color: red; | |
} | |
#arcade-button | |
.roundbtn:active.red .inner { | |
-moz-box-shadow: darkred 0 8px 0 inset; | |
-webkit-box-shadow: darkred 0 8px 0 inset; | |
box-shadow: darkred 0 8px 0 inset; | |
-moz-transition: margin 35ms 35ms linear, #arcade-button box-shadow 35ms linear; | |
-o-transition: margin 35ms 35ms linear, #arcade-button box-shadow 35ms linear; | |
-webkit-transition: margin 35ms 35ms, #arcade-button box-shadow 35ms linear; | |
-webkit-transition-delay: linear, #arcade-button 0s; | |
transition: margin 35ms 35ms linear, #arcade-button box-shadow 35ms linear; | |
-ms-transition: margin 35ms 35ms linear, #arcade-button box-shadow 35ms linear; | |
} | |
/*ROUNDED BTN*/ | |
#arcade-button | |
.roundbtn .inner { | |
position: relative; | |
width: 75px; | |
height: 75px; | |
background-color: #9a9a9a; | |
margin-top: -8px; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
-moz-border-radius: 50%; | |
-webkit-border-radius: 50%; | |
border-radius: 50%; | |
-moz-box-shadow: none; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
-moz-transition: margin 35ms 35ms linear, #arcade-button box-shadow 35ms linear; | |
-o-transition: margin 35ms 35ms linear, #arcade-button box-shadow 35ms linear; | |
-webkit-transition: margin 35ms 35ms, #arcade-button box-shadow 35ms linear; | |
-webkit-transition-delay: linear, #arcade-button 0s; | |
transition: margin 35ms 35ms linear, #arcade-button box-shadow 35ms linear; | |
-ms-transition: margin 35ms 35ms linear, #arcade-button box-shadow 35ms linear; | |
} | |
#arcade-button | |
.roundbtn:active .inner{ | |
margin-top: 0; | |
-moz-box-shadow: #6c6161 0 8px 0 inset; | |
-webkit-box-shadow: #6c6161 0 8px 0 inset; | |
box-shadow: #6c6161 0 8px 0 inset; | |
-moz-transition: margin 35ms linear, #arcade-button box-shadow 17.5ms 17.5ms linear; | |
-o-transition: margin 35ms linear, #arcade-button box-shadow 17.5ms 17.5ms linear; | |
-webkit-transition: margin 35ms linear, #arcade-button box-shadow 17.5ms 17.5ms; | |
-webkit-transition-delay: 0s, #arcade-button linear; | |
transition: margin 35ms linear, #arcade-button box-shadow 17.5ms 17.5ms linear; | |
-ms-transition: margin 35ms linear, #arcade-button box-shadow 17.5ms 17.5ms linear; | |
} | |
/*SQUARE BUTTON*/ | |
#arcade-button | |
.squarebtn .inner { | |
position: relative; | |
width: 75px; | |
height: 75px; | |
background-color: #FFF; | |
margin-top: -10px; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
-moz-box-shadow: none; | |
-webkit-box-shadow: none; | |
box-shadow: none; | |
-moz-transition: margin 35ms 35ms linear, #arcade-button box-shadow 35ms linear; | |
-o-transition: margin 35ms 35ms linear, #arcade-button box-shadow 35ms linear; | |
-webkit-transition: margin 35ms 35ms, #arcade-button box-shadow 35ms linear; | |
-webkit-transition-delay: linear, #arcade-button 0s; | |
transition: margin 35ms 35ms linear, #arcade-button box-shadow 35ms linear; | |
-ms-transition: margin 35ms 35ms linear, #arcade-button box-shadow 35ms linear; | |
} | |
#arcade-button | |
.squarebtn:active .inner{ | |
margin-top: 0; | |
-moz-box-shadow: #c4c4c4 0 8px 0 inset; | |
-webkit-box-shadow: #c4c4c4 0 8px 0 inset; | |
box-shadow: #c4c4c4 0 8px 0 inset; | |
-moz-transition: margin 35ms linear, #arcade-button box-shadow 17.5ms 17.5ms linear; | |
-o-transition: margin 35ms linear, #arcade-button box-shadow 17.5ms 17.5ms linear; | |
-webkit-transition: margin 35ms linear, #arcade-button box-shadow 17.5ms 17.5ms; | |
-webkit-transition-delay: 0s, #arcade-button linear; | |
transition: margin 35ms linear, #arcade-button box-shadow 17.5ms 17.5ms linear; | |
-ms-transition: margin 35ms linear, #arcade-button box-shadow 17.5ms 17.5ms linear; | |
} | |
/*TEXT*/ | |
#arcade-button | |
.text { | |
position: absolute; | |
top: 26px; | |
left: 0; | |
right: 0; | |
text-align: center; | |
text-transform: uppercase; | |
font-family: Courier New; | |
font-size: 13px; | |
color: white; | |
font-weight: 300; | |
letter-spacing: 1px; | |
text-shadow: rgba(0, #arcade-button 0, #arcade-button 0, #arcade-button 0.5) 0 0 5px; | |
} | |
#arcade-button | |
.textBlack { | |
position: absolute; | |
top: 26px; | |
left: 0; | |
right: 0; | |
text-align: center; | |
text-transform: uppercase; | |
font-family: Courier New; | |
font-size: 13px; | |
color: black; | |
font-weight: 300; | |
letter-spacing: 1px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment