Button by cssbuttons-io

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 position: relative;
23 display: block;
24 margin: 0;
25 width: 3rem;
26 height: 3rem;
27 background: #282936;
28 border-radius: 1.625rem;
29}
30
31button.learn-more .circle .icon {
32 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
33 position: absolute;
34 top: 0;
35 bottom: 0;
36 margin: auto;
37 background: #fff;
38}
39
40button.learn-more .circle .icon.arrow {
41 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
42 left: 0.625rem;
43 width: 1.125rem;
44 height: 0.125rem;
45 background: none;
46}
47
48button.learn-more .circle .icon.arrow::before {
49 position: absolute;
50 content: "";
51 top: -0.29rem;
52 right: 0.0625rem;
53 width: 0.625rem;
54 height: 0.625rem;
55 border-top: 0.125rem solid #fff;
56 border-right: 0.125rem solid #fff;
57 transform: rotate(45deg);
58}
59
60button.learn-more .button-text {
61 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
62 position: absolute;
63 top: 0;
64 left: 0;
65 right: 0;
66 bottom: 0;
67 padding: 0.75rem 0;
68 margin: 0 0 0 1.85rem;
69 color: #282936;
70 font-weight: 700;
71 line-height: 1.6;
72 text-align: center;
73 text-transform: uppercase;
74}
75
76button:hover .circle {
77 width: 100%;
78}
79
80button:hover .circle .icon.arrow {
81 background: #fff;
82 transform: translate(1rem, 0);
83}
84
85button:hover .button-text {
86 color: #fff;
87}