Button by Creatlydev
#e8e8e8
1.Btn { 2 width: 130px; 3 height: 40px; 4 display: flex; 5 align-items: center; 6 justify-content: center; 7 background-color: rgb(15, 15, 15); 8 border: none; 9 color: white; 10 font-weight: 600; 11 gap: 8px; 12 cursor: pointer; 13 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.103); 14 position: relative; 15 overflow: hidden; 16 transition-duration: .3s; 17} 18 19.svgIcon { 20 width: 16px; 21} 22 23.svgIcon path { 24 fill: white; 25} 26 27.Btn::before { 28 width: calc(100% + 40px); 29 aspect-ratio: 1/1; 30 position: absolute; 31 content: ""; 32 background-color: white; 33 border-radius: 50%; 34 left: -20px; 35 top: 50%; 36 transform: translate(-150%, -50%); 37 transition-duration: .5s; 38 mix-blend-mode: difference; 39} 40 41.Btn:hover::before { 42 transform: translate(0, -50%); 43} 44 45.Btn:active { 46 transform: translateY(4px); 47 transition-duration: .3s; 48}
537 views
Variation of abutton
MIT License