Button by simontheonlyone
#212121
1.button { 2 position: relative; 3 width: 6em; 4 height: 4em; 5 border: none; 6 background: none; 7} 8 9.X { 10 content: ''; 11 position: absolute; 12 top: 50%; 13 left: 33%; 14 width: 2em; 15 height: 1.5px; 16 background-color: #fff; 17 transform: rotate(45deg); 18} 19 20.Y { 21 content: ''; 22 position: absolute; 23 top: 50%; 24 left: 33%; 25 width: 2em; 26 height: 1.5px; 27 background-color: #fff; 28 transform: rotate(-45deg); 29} 30 31.close { 32 position: absolute; 33 display: flex; 34 align-items: center; 35 justify-content: center; 36 bottom: -40%; 37 left: 70%; 38 width: 3em; 39 height: 1.7em; 40 font-size: 16px; 41 background-color: rgb(254, 255, 225); 42 color: #000; 43 border: 1px solid #000; 44 pointer-events: none; 45 opacity: 0; 46} 47 48.button:hover { 49 background-color: rgb(210, 0, 0); 50} 51 52.button:active { 53 background-color: rgb(130, 0, 0); 54} 55 56.button:hover > .close { 57 animation: close 0.2s forwards 1.25s; 58} 59 60@keyframes close { 61 100% { 62 opacity: 1; 63 } 64}
1.4K views
1.4K views
Variations
1 MIT License