#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: 130px; 29 height: 130px; 30 position: absolute; 31 content: ""; 32 background-color: white; 33 border-radius: 50%; 34 left: -100%; 35 top: 0; 36 transition-duration: .3s; 37 mix-blend-mode: difference; 38} 39 40.Btn:hover::before { 41 transition-duration: .3s; 42 transform: translate(100%,-50%); 43 border-radius: 0; 44} 45 46.Btn:active { 47 transform: translate(5px,5px); 48 transition-duration: .3s; 49}
Comments
Variations
1 MIT License