Created
November 9, 2016 10:13
-
-
Save x-raizor/c5775ade27cc09d7b174c4284b062fc7 to your computer and use it in GitHub Desktop.
585 buttons
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
/** | |
* 585 buttons | |
*/ | |
body { | |
background: #ffffff; | |
min-height: 100%; | |
text-align: center; | |
} | |
button { | |
height: 30px; | |
font-size: 16px; | |
color: #fff; | |
padding: 0.25em 2em 0.5em; | |
background: hsl(1, 77%, 55%); | |
box-shadow: 0px 1px 0px 0px hsl( 0, 73%, 41%);; | |
border-radius: 5px; | |
border: none; | |
outline: none; | |
margin: 0 1em 0 0; | |
transition: all 200ms; | |
} | |
button:hover {transition: all 200ms;} | |
button:hover {background: hsl(1, 100%, 60%); box-shadow: 0px 1px 0px 0px hsl( 0, 73%, 46%);} | |
button:active { background: hsl(1, 100%, 40%); box-shadow: 0px 1px 0px 0px hsl( 0, 73%, 26%);;} | |
button:disabled {color: hsla(0, 0%, 100%, 0.4);} | |
button.grey {background: hsl(208, 18%, 69%); box-shadow: 0px 1px 0px 0px hsl(208, 9%, 52%);} | |
button.grey:hover {background: hsl(208, 18%, 74%); box-shadow: 0px 1px 0px 0px hsl(208, 9%, 57%);} | |
button.grey:active {background: hsl(208, 18%, 54%); box-shadow: 0px 1px 0px 0px hsl(208, 9%, 37%);} | |
button.blue {background: hsl(207, 57%, 56%); box-shadow: 0px 1px 0px 0px hsl(207, 41%, 39%);} | |
button.blue:hover {background: hsl(207, 57%, 61%); box-shadow: 0px 1px 0px 0px hsl(207, 41%, 44%);} | |
button.blue:active {background: hsl(207, 57%, 41%); box-shadow: 0px 1px 0px 0px hsl(207, 41%, 24%);} | |
button.blue:disabled {color: hsla(0, 0%, 100%, 0.4);} | |
button.disabled {color: hsla(0, 0%, 100%, 0.5);} | |
#page { margin: 4em auto 0;} |
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
<div id="page"> | |
<button>Добавить</button><button class="grey"><div>Отнять</div></button><button class="blue">Умножить</button><br/><br/> | |
<button class="disabled">Добавить</button><button class="grey disabled"><div>Отнять</div></button><button class="blue disabled">Умножить</button> | |
</div> |
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
// alert('Hello world!'); |
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
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment