Button by abrahamcalsin
#e8e8e8
1button { 2 position: relative; 3 display: flex; 4 justify-content: center; 5 align-items: center; 6 border-radius: 5px; 7 background: #183153; 8 font-family: "Montserrat", sans-serif; 9 box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2); 10 overflow: hidden; 11 cursor: pointer; 12 border: none; 13} 14 15button:after { 16 content: " "; 17 width: 0%; 18 height: 100%; 19 background: #ffd401; 20 position: absolute; 21 transition: all 0.4s ease-in-out; 22 right: 0; 23} 24 25button:hover::after { 26 right: auto; 27 left: 0; 28 width: 100%; 29} 30 31button span { 32 text-align: center; 33 text-decoration: none; 34 width: 100%; 35 padding: 18px 25px; 36 color: #fff; 37 font-size: 1.125em; 38 font-weight: 700; 39 letter-spacing: 0.3em; 40 z-index: 20; 41 transition: all 0.3s ease-in-out; 42} 43 44button:hover span { 45 color: #183153; 46 animation: scaleUp 0.3s ease-in-out; 47} 48 49@keyframes scaleUp { 50 0% { 51 transform: scale(1); 52 } 53 54 50% { 55 transform: scale(0.95); 56 } 57 58 100% { 59 transform: scale(1); 60 } 61} 62
18K views
18K views
Variations
1 MIT License