Button by Gaurav-WebDev
#e8e8e8
1.button { 2 height: 50px; 3 width: 150px; 4 font-weight: 800; 5 border: none; 6 background-color: #3434; 7 color: #ffff; 8 border-radius: 20px; 9 cursor: pointer; 10 position: relative; 11 overflow: hidden; 12 transition: all 0.7s; 13} 14 15.button::after { 16 content: "Me"; 17 height: 100%; 18 width: 50%; 19 background-color: coral; 20 position: absolute; 21 right: 0px; 22 bottom: 0px; 23 display: flex; 24 align-items: center; 25 justify-content: start; 26 padding-left: 10px; 27 box-sizing: border-box; 28 transition: all 0.7s; 29} 30 31.button::before { 32 content: "Hover"; 33 height: 100%; 34 width: 50%; 35 background-color: teal; 36 position: absolute; 37 left: 0px; 38 top: 0px; 39 display: flex; 40 align-items: center; 41 justify-content: end; 42 padding-right: 10px; 43 box-sizing: border-box; 44 transition: all 0.7s; 45} 46 47.button:hover::after { 48 right: -100px; 49} 50 51.button:hover::before { 52 left: -100px; 53} 54 55.button:hover { 56 background-color: #000; 57 color: #fff; 58 transform: scale(1.2); 59} 60
184 views
184 views
MIT License