Button by KhaledMatalkah
#212121
1.button { 2 display: inline-block; 3 padding: 10px 20px; 4 font-size: 16px; 5 font-weight: bold; 6 text-align: center; 7 text-decoration: none; 8 color: #ffffff; 9 background-color: #000000; 10 border: none; 11 border-radius: 50px; 12 transition: all 0.3s ease-in-out; 13 cursor: pointer; 14 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 15 position: relative; 16 z-index: 1; 17} 18 19.button:hover { 20 background-color: #111111; 21 transform: translateY(-2px); 22 box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); 23} 24 25.button:focus { 26 outline: none; 27 box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.3); 28} 29 30.button:active { 31 transform: translateY(1px); 32 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 33} 34 35.button:disabled { 36 opacity: 0.6; 37 cursor: not-allowed; 38} 39 40.button::before { 41 content: ""; 42 position: absolute; 43 top: -5px; 44 left: -5px; 45 right: -5px; 46 bottom: -5px; 47 background-color: rgba(255, 255, 255, 0.1); 48 border-radius: 50px; 49 z-index: -1; 50 transition: all 0.3s ease-in-out; 51} 52 53.button:hover::before { 54 top: -8px; 55 left: -8px; 56 right: -8px; 57 bottom: -8px; 58} 59 60
487 views
487 views
MIT License