1.btn {
2  font-size: 14px;
3  font-weight: 300;
4  text-transform: uppercase;
5  line-height: 8px;
6  border-radius: 30px;
7  border: none;
8  background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
9  color: #fff;
10  position: relative;
11  overflow: hidden;
12  cursor: pointer;
13}
14
15.btn > * {
16  display: inline-block;
17  transition: all ease-in-out .5s;
18}
19
20.btn__visible {
21  padding: 1.2rem 3rem;
22  text-align: center;
23}
24
25.btn__invisible {
26  width: 100%;
27  position: absolute;
28  padding: 1.2rem 0;
29  left: 0;
30  top: -100%;
31}
32
33.btn:hover {
34  background-image: linear-gradient(160deg, #f093fb 0%, #f5576c 100%);
35}
36
37.btn:hover .btn__visible {
38  transform: translateY(100%);
39}
40
41.btn:hover .btn__invisible {
42  top: 0;
43}
44
45.btn:focus {
46  outline: none;
47}
48