|
button { |
|
position: relative; |
|
border: none; |
|
border-radius: 4px; |
|
outline: none; |
|
text-decoration: none; |
|
color: #fff; |
|
background: #32325d; |
|
white-space: nowrap; |
|
display: inline-block; |
|
height: 40px; |
|
line-height: 40px; |
|
padding: 0 14px; |
|
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08); |
|
border-radius: 4px; |
|
font-size: 15px; |
|
font-weight: 600; |
|
letter-spacing: 0.025em; |
|
text-decoration: none; |
|
-webkit-transition: all 150ms ease; |
|
transition: all 150ms ease; |
|
} |
|
|
|
button:hover { |
|
transform: translateY(-1px); |
|
box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08); |
|
background-color: #43458b; |
|
} |
|
|
|
button:after { |
|
position: absolute; |
|
left: calc(50% - 0.5em); |
|
top: 25%; |
|
height: 1em; |
|
width: 1em; |
|
content: ''; |
|
opacity: 0; |
|
line-height: 100%; |
|
border-left: 2px solid rgba(255, 255, 255, 0.2); |
|
border-right: 2px solid rgba(255, 255, 255, 0.2); |
|
border-bottom: 2px solid rgba(255, 255, 255, 0.2); |
|
border-top: 2px solid rgba(255, 255, 255, 0.8); |
|
border-radius: 100%; |
|
-webkit-animation: rotate 0.6s infinite linear; |
|
-moz-animation: rotate 0.6s infinite linear; |
|
-ms-animation: rotate 0.6s infinite linear; |
|
-o-animation: rotate 0.6s infinite linear; |
|
animation: rotate 0.6s infinite linear; |
|
-moz-transition: opacity 0.15s ease-out; |
|
-o-transition: opacity 0.15s ease-out; |
|
-webkit-transition: opacity 0.15s ease-out; |
|
transition: opacity 0.15s ease-out; |
|
} |
|
|
|
button.busy { |
|
color: transparent; |
|
} |
|
|
|
button.busy:after { |
|
opacity: 1; |
|
} |
|
|
|
@keyframes rotate { |
|
from { |
|
transform: rotate(0deg); |
|
} |
|
to { |
|
transform: rotate(360deg); |
|
} |
|
} |