Button by javierBarroso
#212121
1.button { 2 position: relative; 3 width: 4em; 4 height: 4em; 5 border: none; 6 background: rgba(180, 83, 107, 0.11); 7 border-radius: 5px; 8 transition: background 0.5s; 9} 10 11.X { 12 content: ""; 13 position: absolute; 14 top: 50%; 15 left: 50%; 16 width: 2em; 17 height: 1.5px; 18 background-color: rgb(255, 255, 255); 19 transform: translateX(-50%) rotate(45deg); 20} 21 22.Y { 23 content: ""; 24 position: absolute; 25 top: 50%; 26 left: 50%; 27 width: 2em; 28 height: 1.5px; 29 background-color: #fff; 30 transform: translateX(-50%) rotate(-45deg); 31} 32 33.close { 34 position: absolute; 35 display: flex; 36 padding: 0.8rem 1.5rem; 37 align-items: center; 38 justify-content: center; 39 transform: translateX(-50%); 40 top: -70%; 41 left: 50%; 42 width: 3em; 43 height: 1.7em; 44 font-size: 12px; 45 background-color: rgb(19, 22, 24); 46 color: rgb(187, 229, 236); 47 border: none; 48 border-radius: 3px; 49 pointer-events: none; 50 opacity: 0; 51} 52 53.button:hover { 54 background-color: rgb(211, 21, 21); 55} 56 57.button:active { 58 background-color: rgb(130, 0, 0); 59} 60 61.button:hover > .close { 62 animation: close 0.2s forwards 0.25s; 63} 64 65@keyframes close { 66 100% { 67 opacity: 1; 68 } 69} 70
993 views
Variation of abutton
MIT License