1button {
2 position: relative;
3 overflow: hidden;
4 outline: none;
5 cursor: pointer;
6 border-radius: 50px;
7 background-color: hsl(255deg 50% 40%);
8 border: solid 4px hsl(50deg 100% 50%);
9 font-family: inherit;
10}
11
12.default-btn,.hover-btn {
13 background-color: hsl(255deg 50% 40%);
14 display: -webkit-box;
15 display: -moz-box;
16 display: -ms-flexbox;
17 display: -webkit-flex;
18 display: flex;
19 align-items: center;
20 gap: 15px;
21 padding: 15px 20px;
22 border-radius: 50px;
23 font-size: 17px;
24 font-weight: 500;
25 text-transform: uppercase;
26 transition: all .3s ease;
27}
28
29.hover-btn {
30 position: absolute;
31 inset: 0;
32 background-color: hsl(255deg 50% 49%);
33 transform: translate(0%,100%);
34}
35
36.default-btn span {
37 color: hsl(0, 0%, 100%);
38}
39
40.hover-btn span {
41 color: hsl(50deg 100% 50%);
42}
43
44button:hover .default-btn {
45 transform: translate(0%,-100%);
46}
47
48button:hover .hover-btn {
49 transform: translate(0%,0%);
50}