Button by TISEPSE
#212121
1.button { 2 background-color: #ff9b82; 3 cursor: pointer; 4 padding: 1em; 5 width: 10rem; 6 font-size: 17px; 7 box-shadow: 0 0.4rem #ffc8c8; 8 border-radius: 27px; 9 overflow: hidden; 10 z-index: 2; 11 transition: 0.2s; 12 border: 2px solid black; 13} 14 15.button:hover { 16 transform: translateY(0.2rem); 17 box-shadow: 0 0.25rem #ffc8c8; 18 letter-spacing: 2px; 19 color: #fefefe; 20} 21 22.button:active { 23 transform: translateY(0.6rem); 24 box-shadow: none; 25 transition: 0.1s; 26} 27 28.button span { 29 background: #e48586; 30 border-radius: 27px; 31 height: 100%; 32 width: 0%; 33 position: absolute; 34 left: 0; 35 bottom: 0; 36 z-index: -1; 37 transition: 0.2s ease-in-out; 38} 39 40.button:hover span { 41 width: 100%; 42} 43
416 views
416 views
MIT License