Button by Tsiangana
#e8e8e8
1.button { 2 width: 140px; 3 height: 45px; 4 border-radius: 30em; 5 position: relative; 6 overflow: hidden; 7 color: #fff; 8 font-family: Roboto, sans-serif; 9 font-weight: 600; 10 font-size: 15px; 11 line-height: 1; 12 cursor: pointer; 13 z-index: 1; 14 background: #ff135a; 15 border: 3px solid #fff; 16 box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff; 17 transition: 0.6s ease-in; 18} 19 20.button:hover { 21 background: #fff; 22} 23 24.button .two { 25 display: none; 26} 27 28.button::before { 29 content: ""; 30 width: 0; 31 height: 50px; 32 border-radius: 30em; 33 position: absolute; 34 top: 0; 35 left: 0; 36 background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%); 37 transition: 0.5s ease; 38 display: block; 39 z-index: -1; 40} 41 42.button:hover::before { 43 width: 140px; 44 transition: 3s linear; 45} 46 47.button:hover .one { 48 display: none; 49} 50 51.button:hover .two { 52 display: inline; 53} 54
467 views
467 views
MIT License