Create buttons.less
This commit is contained in:
parent
2100ce402f
commit
83bc63b8a6
1 changed files with 53 additions and 0 deletions
53
less/buttons.less
Normal file
53
less/buttons.less
Normal file
|
@ -0,0 +1,53 @@
|
|||
@btn-a-bg: #0AE;
|
||||
@btn-b-bg: #3C5;
|
||||
@btn-c-bg: #D33;
|
||||
|
||||
i, button {
|
||||
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #aaa;
|
||||
box-shadow: 3px 3px 0 black;
|
||||
color: rgb(243, 243, 243) !important;
|
||||
font-size: 2.5em;
|
||||
padding: 15px 40px 16px;
|
||||
text-decoration: none;
|
||||
margin: .3em .7em .3em .7em;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
&.smooth {
|
||||
transition: background .15s ease-in-out;
|
||||
}
|
||||
&.btn-a {
|
||||
background: @btn-a-bg;
|
||||
&:hover {
|
||||
background: darken(@btn-a-bg, 5%);
|
||||
}
|
||||
&:active {
|
||||
background: darken(@btn-a-bg, 10%);
|
||||
}
|
||||
}
|
||||
&.btn-b {
|
||||
background: @btn-b-bg;
|
||||
&:hover {
|
||||
background: darken(@btn-b-bg, 5%);
|
||||
}
|
||||
&:active {
|
||||
background: darken(@btn-b-bg, 10%);
|
||||
}
|
||||
}
|
||||
&.btn-c {
|
||||
background: @btn-c-bg;
|
||||
&:hover {
|
||||
background: darken(@btn-c-bg, 5%);
|
||||
}
|
||||
&:active {
|
||||
background: darken(@btn-c-bg, 10%);
|
||||
}
|
||||
}
|
||||
&.btn-small {
|
||||
padding: 7px 19px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
Loading…
Add table
Reference in a new issue