5.9K views
CSSAdd prefixes
1.btn { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 width: 50px; 6 height: 50px; 7 border-radius: 10px; 8 border: none; 9 background-color: transparent; 10 position: relative; 11} 12 13.btn::after { 14 content: 'like'; 15 width: fit-content; 16 height: fit-content; 17 position: absolute; 18 font-size: 15px; 19 color: white; 20 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 21 opacity: 0; 22 visibility: hidden; 23 transition: .2s linear; 24 top: 115%; 25} 26 27.icon { 28 width: 30px; 29 height: 30px; 30 transition: .2s linear; 31} 32 33.icon path { 34 fill: white; 35 transition: .2s linear; 36} 37 38.btn:hover > .icon { 39 transform: scale(1.2); 40} 41 42.btn:hover > .icon path { 43 fill: rgb(177, 139, 189); 44} 45 46.btn:hover::after { 47 visibility: visible; 48 opacity: 1; 49 top: 105%; 50} 51 52
HTML
1<button class="btn"> 2 <svg viewBox="0 0 17.503 15.625" height="20.625" width="20.503" xmlns="http://www.w3.org/2000/svg" class="icon"> 3 <path transform="translate(0 0)" d="M8.752,15.625h0L1.383,8.162a4.824,4.824,0,0,1,0-6.762,4.679,4.679,0,0,1,6.674,0l.694.7.694-.7a4.678,4.678,0,0,1,6.675,0,4.825,4.825,0,0,1,0,6.762L8.752,15.624ZM4.72,1.25A3.442,3.442,0,0,0,2.277,2.275a3.562,3.562,0,0,0,0,5l6.475,6.556,6.475-6.556a3.563,3.563,0,0,0,0-5A3.443,3.443,0,0,0,12.786,1.25h-.01a3.415,3.415,0,0,0-2.443,1.038L8.752,3.9,7.164,2.275A3.442,3.442,0,0,0,4.72,1.25Z" id="Fill"></path> 4 </svg> 5</button>