#e8e8e8
1.btn { 2 background-color: transparent; 3 position: relative; 4 border: none; 5} 6 7.btn::after { 8 content: 'delete'; 9 position: absolute; 10 top: -130%; 11 left: 50%; 12 transform: translateX(-50%); 13 width: fit-content; 14 height: fit-content; 15 background-color: rgb(168, 7, 7); 16 padding: 4px 8px; 17 border-radius: 5px; 18 transition: .2s linear; 19 transition-delay: .2s; 20 color: white; 21 text-transform: uppercase; 22 font-size: 12px; 23 opacity: 0; 24 visibility: hidden; 25} 26 27.icon { 28 transform: scale(1.2); 29 transition: .2s linear; 30} 31 32.btn:hover > .icon { 33 transform: scale(1.5); 34} 35 36.btn:hover > .icon path { 37 fill: rgb(168, 7, 7); 38} 39 40.btn:hover::after { 41 visibility: visible; 42 opacity: 1; 43 top: -160%; 44} 45
2.7K views
2.7K views
Comments
MIT License