scrumplex.net
My personal website
1@import "variables";
2
3.btn {
4 display: inline-block;
5 min-width: 64px;
6 margin: 4px;
7 padding: 0 20px;
8 background-color: transparent;
9 outline: none;
10 border: none;
11 border-radius: 4px;
12 text-transform: uppercase;
13 line-height: 2.25em;
14 font-size: 1rem;
15 font-weight: 400;
16 text-align: center;
17 transition:
18 background 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
19 box-shadow 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
20}
21
22@each $name, $color in $btnColors {
23 .btn.btn-#{$name},
24 .btn.btn-#{$name}:focus {
25 color: $color;
26 }
27
28 .btn.btn-#{$name}:hover {
29 background-color: transparentize($color, 0.9);
30 text-decoration: none;
31 }
32
33 .btn.btn-#{$name}:focus {
34 background-color: transparentize($color, 0.95);
35 }
36
37 .btn.btn-#{$name}:active {
38 background-color: transparentize($color, 0.7);
39 }
40}
41
42.btn:focus {
43 outline: none;
44}