1/* From uiverse.io by @Ali-Tahmazi99 */
2button {
3 display: inline-block;
4 width: 150px;
5 height: 50px;
6 border-radius: 10px;
7 border: 1px solid #03045e;
8 position: relative;
9 overflow: hidden;
10 transition: all 0.5s ease-in;
11 z-index: 1;
12}
13
14button::before,
15button::after {
16 content: '';
17 position: absolute;
18 top: 0;
19 width: 0;
20 height: 100%;
21 transform: skew(15deg);
22 transition: all 0.5s;
23 overflow: hidden;
24 z-index: -1;
25}
26
27button::before {
28 left: -10px;
29 background: #240046;
30}
31
32button::after {
33 right: -10px;
34 background: #5a189a;
35}
36
37button:hover::before,
38button:hover::after {
39 width: 58%;
40}
41
42button:hover span {
43 color: #e0aaff;
44 transition: 0.3s;
45}
46
47button span {
48 color: #03045e;
49 font-size: 18px;
50 transition: all 0.3s ease-in;
51}