Button by mucahit312ataman610
#212121
1.button { 2 --primary-color: #000; 3 --secondary-color: #fff; 4 --border-color: #000; 5 background-color: var(--primary-color); 6 border: 2px solid var(--border-color); 7 color: var(--secondary-color); 8 padding: 10px 20px; 9 font-size: 18px; 10 font-weight: bold; 11 border-radius: 50px; 12 box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); 13 position: relative; 14 overflow: hidden; 15 z-index: 1; 16 transition: all 0.3s ease-in-out; 17} 18 19.button::before { 20 content: ""; 21 display: block; 22 position: absolute; 23 top: -100%; 24 left: 50%; 25 width: 150%; 26 height: 150%; 27 background-color: var(--secondary-color); 28 border-radius: 50%; 29 transform: translate(-50%, 0) scale(0); 30 z-index: -1; 31 transition: all 0.3s ease-in-out; 32} 33 34.button:hover { 35 background-color: var(--secondary-color); 36 color: var(--primary-color); 37 transform: translateY(-5px); 38 box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2); 39} 40 41.button:hover::before { 42 transform: translate(-50%, -50%) scale(2); 43} 44 45.button:active { 46 transform: translateY(0); 47 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 48} 49
529 views
529 views
MIT License