#e8e8e8
1.Btn { 2 width: 140px; 3 height: 35px; 4 display: flex; 5 align-items: center; 6 justify-content: flex-start; 7 border: none; 8 border-radius: 5px; 9 overflow: hidden; 10 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.089); 11 cursor: pointer; 12 background-color: transparent; 13} 14 15.leftContainer { 16 width: 60%; 17 height: 100%; 18 background-color: rgb(238, 0, 0); 19 display: flex; 20 align-items: center; 21 justify-content: center; 22 gap: 8px; 23} 24 25.leftContainer .like { 26 color: white; 27 font-weight: 600; 28} 29 30.likeCount { 31 width: 40%; 32 height: 100%; 33 display: flex; 34 align-items: center; 35 justify-content: center; 36 color: rgb(238, 0, 0); 37 font-weight: 600; 38 position: relative; 39 background-color: white; 40} 41 42.likeCount::before { 43 height: 8px; 44 width: 8px; 45 position: absolute; 46 content: ""; 47 background-color: rgb(255, 255, 255); 48 transform: rotate(45deg); 49 left: -4px; 50} 51 52.Btn:hover .leftContainer { 53 background-color: rgb(219, 0, 0); 54} 55 56.Btn:active .leftContainer { 57 background-color: rgb(201, 0, 0); 58} 59 60.Btn:active .leftContainer svg { 61 transform: scale(1.15); 62 transform-origin: top; 63} 64
5.1K views
5.1K views
Comments
Variations
1 MIT License