Button by Saad3092003

1button {
2  position: relative;
3  display: inline-block;
4  cursor: pointer;
5  outline: none;
6  border: 0;
7  vertical-align: middle;
8  text-decoration: none;
9  background: transparent;
10  padding: 0;
11  font-size: inherit;
12  font-family: inherit;
13}
14
15button.learn-more {
16  width: 12rem;
17  height: auto;
18}
19
20button.learn-more .circle {
21  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
22  box-shadow: 0 0 5px 1px white;
23  position: relative;
24  display: block;
25  margin: 0;
26  width: 3rem;
27  height: 3rem;
28  background: #282936;
29  border-radius: 1.625rem;
30}
31
32button.learn-more .circle .icon {
33  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
34  position: absolute;
35  top: 0;
36  bottom: 0;
37  margin: auto;
38  background: #fff;
39}
40
41button.learn-more .circle .icon.arrow {
42  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
43  left: 0.625rem;
44  width: 1.125rem;
45  height: 0.125rem;
46  background: none;
47}
48
49button.learn-more .circle .icon.arrow::before {
50  position: absolute;
51  content: "";
52  top: -0.29rem;
53  right: 0.0625rem;
54  width: 0.625rem;
55  height: 0.625rem;
56  border-top: 0.125rem solid #fff;
57  border-right: 0.125rem solid #fff;
58  transform: rotate(45deg);
59}
60
61button.learn-more .button-text {
62  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
63  position: absolute;
64  top: 0;
65  left: 0;
66  right: 0;
67  bottom: 0;
68  padding: 0.75rem 0;
69  margin: 0 0 0 1.85rem;
70  color: rgba(255, 255, 255, 0.493);
71  font-weight: 700;
72  line-height: 1.6;
73  text-align: center;
74  text-transform: uppercase;
75}
76
77button:hover .circle {
78  width: 100%;
79  box-shadow: 0 0 10px 2px white;
80}
81
82button:hover .button-text {
83  transform: translate(-1.7rem, 0);
84}
85
86button:hover .circle .icon.arrow {
87  background: #fff;
88  transform: translate(8.7rem, 0);
89}
90
91button:active .circle .icon.arrow {
92  transform: translate(9.5rem, 0);
93  transition: all 0.3s;
94}
95
96button:active .circle {
97  transform: scale(0.9);
98  transition: all 0.3s;
99  box-shadow: 0 0 5px 0.5px white;
100}
101
102button:hover .button-text {
103  color: #fff;
104}
105
106button:active .button-text {
107  color: rgba(255, 255, 255, 0.459);
108}