1.Btn {
2 width: 45px;
3 height: 45px;
4 display: flex;
5 align-items: center;
6 justify-content: center;
7 border: none;
8 background-color: transparent;
9 position: relative;
10
11 border-radius: 7px;
12 cursor: pointer;
13 transition: all .3s;
14}
15
16.svgContainer {
17 width: 100%;
18 height: 100%;
19 display: flex;
20 align-items: center;
21 justify-content: center;
22 background-color: transparent;
23 backdrop-filter: blur(4px);
24 letter-spacing: 0.8px;
25 border-radius: 10px;
26 transition: all .3s;
27 border: 1px solid rgba(156, 156, 156, 0.466);
28}
29
30.BG {
31 position: absolute;
32 content: "";
33 width: 100%;
34 height: 100%;
35 background: #f09433;
36 background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
37 background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
38 background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
39 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
40 z-index: -1;
41 border-radius: 9px;
42 pointer-events: none;
43 transition: all .3s;
44}
45
46.Btn:hover .BG {
47 transform: rotate(35deg);
48 transform-origin: bottom;
49}
50
51.Btn:hover .svgContainer {
52 background-color: rgba(156, 156, 156, 0.466);
53}
54
