Button by mRcOol7
#212121
1.button.x { 2 max-width: 320px; 3 display: flex; 4 padding: 0.5rem 1.4rem; 5 font-size: 0.875rem; 6 line-height: 1.25rem; 7 font-weight: 700; 8 text-align: center; 9 text-transform: uppercase; 10 vertical-align: middle; 11 align-items: center; 12 border-radius: 0.5rem; 13 border: 1px solid rgba(0, 0, 0, 0.25); 14 gap: 0.75rem; 15 color: #ffffff; 16 background-color: #000; 17 cursor: pointer; 18 transition: all 0.6s ease; 19 text-decoration: none; 20} 21 22.button.x svg { 23 height: 16px; 24 width: 16px; 25 fill: #fff; 26 margin-right: 0.5rem; 27} 28 29.button.x:hover { 30 transform: scale(1.02); 31 background-color: #333; 32 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 33} 34 35.button.x:focus { 36 outline: none; 37 box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3); 38} 39 40.button.x:active { 41 transform: scale(0.98); 42 opacity: 0.8; 43} 44 45@media (max-width: 480px) { 46 .button.x { 47 max-width: 100%; 48 } 49} 50
156 views
Variation of abutton
MIT License