Button by Dashrath-Sharma
#e8e8e8
1.button { 2 border: none; 3 font-size: 17px; 4 padding: 1em 2em; 5 position: relative; 6 display: grid; 7 place-items: center; 8 overflow: hidden; 9 z-index: 1; 10 background: #caf0f8; 11 border-radius: 8px; 12 box-shadow: 2px 2px 0 #333, 13 2px 2px 200px #ffba08 inset; 14 color: #fff; 15} 16 17.button:active { 18 transform: scale(.98); 19} 20 21.button:hover { 22 box-shadow: 2px 2px 0 #333, 23 2px 2px 200px #003566 inset; 24} 25 26.button::before { 27 content: ''; 28 position: absolute; 29 left: -41%; 30 width: 150%; 31 height: 300%; 32 border-radius: 50%; 33 box-shadow: 2px 2px 0 #333, 34 0 0 0 8px #d00000 inset, 35 0 0 0 16px #dc2f02 inset, 36 0 0 0 24px #e85d04 inset, 37 0 0 0 32px #f48c06 inset, 38 0 0 0 40px #faa307 inset; 39 z-index: -1; 40 transition: .2s; 41} 42 43.button:active::before { 44 opacity: .001; 45 box-shadow: 2px 2px 200px #03045e inset; 46} 47 48.button:hover::before { 49 box-shadow: 2px 2px 0 #333, 50 0 0 0 8px #90e0ef inset, 51 0 0 0 16px #48cae4 inset, 52 0 0 0 24px #00b4d8 inset, 53 0 0 0 32px #0096c7 inset, 54 0 0 0 40px #0077b6 inset; 55 left: -9%; 56 width: 150%; 57 height: 300%; 58}
778 views
778 views
Dashrath-Sharma 23. April at 6:20
23. April at 6:20
To all who may use this code, please drop your website URL if possible. I would love to see this implemented on different websites.
MIT License