Button by elijahwgummer-poc
#e8e8e8
1.button { 2 position: relative; 3 display: inline-block; 4 padding: 12px 26px; 5 font-size: 20px; 6 font-weight: bold; 7 text-align: center; 8 text-decoration: none; 9 border-radius: 50px; 10 color: #fff; 11 background-color: #ff6b6b; 12 border: none; 13 overflow: hidden; 14 transition: all 0.3s ease; 15 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 16} 17 18.button span { 19 position: relative; 20 z-index: 1; 21} 22 23.button .overlay { 24 position: absolute; 25 top: 50%; 26 left: 50%; 27 transform: translate(-50%, -50%); 28 width: 100%; 29 height: 100%; 30 background-color: rgba(0, 0, 0, 0.3); 31 opacity: 0; 32 transition: opacity 0.3s ease; 33} 34 35.button .shine { 36 position: absolute; 37 top: -80px; 38 left: -80px; 39 width: 160px; 40 height: 160px; 41 background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, transparent 80%); 42 transform: rotate(45deg); 43 opacity: 0; 44 transition: opacity 0.3s ease; 45} 46 47.button:hover .overlay { 48 opacity: 0.7; 49} 50 51.button:hover .shine { 52 opacity: 1; 53} 54 55.button:hover { 56 background-color: #ff3333; 57} 58 59.button:active { 60 background-color: #cc0000; 61} 62
512 views
512 views
MIT License