-
Notifications
You must be signed in to change notification settings - Fork 83
/
Afacanc38_polite-chipmunk-64.html
37 lines (35 loc) · 958 Bytes
/
Afacanc38_polite-chipmunk-64.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<button class="button">
Button
</button>
<style>
/* From Uiverse.io by Afacanc38 - Tags: skeuomorphism, minimalist, black, button, dark, cool btn */
.button {
padding: 12px 24px;
border: none;
border-radius: 2px;
background: #424242;
color: white;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, .1) inset,
0 0 0 1px rgba(0, 0, 0, .7),
0 -1px 0 0 rgba(0, 0, 0, .7) inset,
0 1px 2px 1px rgba(0, 0, 0, .6);
cursor: pointer;
transition: 50ms ease-out;
font-weight: 600;
}
.button:hover, .button:focus, .button:focus-visible {
background: #353535;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, .05) inset,
0 0 0 1px rgba(0, 0, 0, .7),
0 -1px 0 0 rgba(0, 0, 0, .7) inset,
0 1px 2px 1px rgba(0, 0, 0, .6);
border: none;
outline: none;
}
.button:active {
background: #181818;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .7) inset,
0 1px 0 0 rgba(255, 255, 255, .05),
0 1px 2px 1px rgba(0, 0, 0, .6) inset;
}
</style>