0ct0pu5/min
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make classless buttons pretty, close #6

Browse source
This commit is contained in:
Owen Versteeg 2014-02-08 23:29:11 -05:00
parent f5412abbe7
commit a394bfe493
1 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
less/buttons.less
View file

@ -3,16 +3,28 @@ ico, button, .btn {
}
button, .btn {
background: #aaa;
box-shadow: 3px 3px #000; /* unshortenable */
background: #fff;
color: #fff;
font-size: 2.5em;
padding: 15px 40px 16px;
text-decoration: none;
margin: .3em .7em;
cursor: pointer;
border: none;
border: 0;
outline: 0;
border-radius: 10px;
}
button:not([class*='btn-']) {
color: #000;
box-shadow: 0 0 0 2px inset; /* We use box shadow here because then we can apply a border without changing the element height */
&:hover {
background: #eee;
}
&:active, &:focus {
background: #ddd;
}
}
.btn-a {
@ -20,6 +32,7 @@ button, .btn {
&:hover {
background: #09d; /* darken(@btn-a-bg, 5%) */
}
&:active, &:focus {
background: #08b; /* darken(@btn-a-bg, 10%) */
}
@ -46,6 +59,7 @@ button, .btn {
}
.btn-small {
padding: 7px 19px;
font-size: 16px;
padding: 7px 19px 8px;
font-size: 1em;
border-radius: 7px;
}