Button by Dashrath-Sharma
#e8e8e8
1.btn { 2 border-right: 1px solid #ff758f; 3 border-bottom: 1px solid #ff758f; 4 border-top: 1px solid transparent; 5 border-left: 1px solid transparent; 6 outline: none; 7 background: #f8f9fa; 8 font-size: 17px; 9 padding: 1em 2em; 10 border-radius: .5em; 11 position: relative; 12 display: flex; 13 justify-content: center; 14 align-items: center; 15 overflow: hidden; 16 transition: all .5s; 17 z-index: 1; 18} 19 20.btn:hover { 21 color: #212529; 22 border-right: 1px solid transparent; 23 border-bottom: 1px solid transparent; 24 border-top: 1px solid #ff758f; 25 border-left: 1px solid #ff758f; 26 box-shadow: 1px 1px 0 #f8f9fa, 27 2px 2px 0 #e9ecef, 28 3px 3px 0 #fff0f3, 29 4px 4px 0 #ffb3c1, 30 5px 5px 0 #ff4d6d, 31 6px 6px 0 #6c757d, 32 7px 7px 0 #a4133c, 33 8px 8px 0 #800f2f, 34 9px 9px 0 #212529; 35} 36 37.btn:active { 38 transition: 0s; 39 transform: scale(.93); 40} 41 42.btn::before, 43.btn::after { 44 left: 0; 45 content: ''; 46 position: absolute; 47 background: #ffccd5; 48 z-index: -1; 49} 50 51.btn::before { 52 width: 0; 53 height: 10%; 54 transition: width .5s; 55} 56 57.btn:hover::before { 58 width: 100%; 59} 60 61.btn::after { 62 width: 100%; 63 height: 0; 64 border-radius: 100%; 65 transition: all .5s .2s; 66} 67 68.btn:hover::after { 69 height: 100%; 70 border-radius: 0; 71} 72
480 views
480 views
Dashrath-Sharma 23. April at 6:22
23. April at 6:22
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