├── index.html
└── styles.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Fancy Buttons
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | *, *::before, *::after {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | flex-wrap: wrap;
10 | margin: 0;
11 | }
12 |
13 | button {
14 | margin: 1rem;
15 | }
16 |
17 | .btn {
18 | background-color: var(--background-color);
19 | color: #222;
20 | padding: .5em 1em;
21 | border: none;
22 | outline: none;
23 | position: relative;
24 | cursor: pointer;
25 |
26 | --background-color: #E3E3E3;
27 | --border-size: 2px;
28 | --accent-color: #0AF;
29 | }
30 |
31 | .btn.btn-border-pop::before {
32 | content: '';
33 | position: absolute;
34 | top: 0;
35 | left: 0;
36 | right: 0;
37 | bottom: 0;
38 | z-index: -1;
39 | border: var(--border-size) solid var(--background-color);
40 | transition: top, left, right, bottom, 100ms ease-in-out;
41 | }
42 |
43 | .btn.btn-border-pop:hover::before,
44 | .btn.btn-border-pop:focus::before {
45 | top: calc(var(--border-size) * -2);
46 | left: calc(var(--border-size) * -2);
47 | right: calc(var(--border-size) * -2);
48 | bottom: calc(var(--border-size) * -2);
49 | }
50 |
51 |
52 |
53 |
54 | .btn.btn-background-slide::before {
55 | content: '';
56 | position: absolute;
57 | top: 0;
58 | left: 0;
59 | bottom: 0;
60 | right: 0;
61 | z-index: -1;
62 | background-color: var(--accent-color);
63 |
64 | transition: transform 300ms ease-in-out;
65 | transform: scaleX(0);
66 | transform-origin: left;
67 | }
68 |
69 | .btn.btn-background-slide:hover::before,
70 | .btn.btn-background-slide:focus::before {
71 | transform: scaleX(1);
72 | }
73 |
74 | .btn.btn-background-slide {
75 | transition: color 300ms ease-in-out;
76 | z-index: 1;
77 | }
78 |
79 |
80 | .btn.btn-background-slide:hover,
81 | .btn.btn-background-slide:focus {
82 | color: white;
83 | }
84 |
85 |
86 |
87 |
88 |
89 | .btn.btn-background-circle::before {
90 | content: '';
91 | position: absolute;
92 | top: 0;
93 | left: 0;
94 | right: 0;
95 | bottom: 0;
96 | z-index: -1;
97 | background-color: var(--background-color);
98 | border-radius: 50%;
99 | transition: transform 500ms ease-in-out;
100 |
101 | transform: scale(1.5);
102 | }
103 |
104 | .btn.btn-background-circle:hover::before,
105 | .btn.btn-background-circle:focus::before {
106 | transform: scale(0);
107 | }
108 |
109 | .btn.btn-background-circle {
110 | z-index: 1;
111 | overflow: hidden;
112 | background-color: var(--accent-color);
113 | transition: color 500ms ease-in-out;
114 | }
115 |
116 | .btn.btn-background-circle:hover,
117 | .btn.btn-background-circle:focus {
118 | color: white;
119 | }
120 |
121 |
122 |
123 |
124 |
125 | .btn.btn-border-underline::before {
126 | content: '';
127 | position: absolute;
128 | left: 0;
129 | right: 0;
130 | bottom: 0;
131 | height: var(--border-size);
132 | background-color: var(--accent-color);
133 | transition: transform 300ms ease-in-out;
134 |
135 | transform: scaleX(0);
136 | }
137 |
138 | .btn.btn-border-underline:hover::before,
139 | .btn.btn-border-underline:focus::before {
140 | transform: scaleX(1);
141 | }
--------------------------------------------------------------------------------