#e8e8e8
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
1K views
1K views
Comments
MIT License