#212121
1.button { 2 cursor: pointer; 3 position: relative; 4 padding: 10px 24px; 5 font-size: 18px; 6 color: rgb(193, 163, 98); 7 border: 2px solid rgb(193, 163, 98); 8 border-radius: 34px; 9 background-color: transparent; 10 font-weight: 600; 11 transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1); 12 overflow: hidden; 13} 14 15.button::before { 16 content: ''; 17 position: absolute; 18 inset: 0; 19 margin: auto; 20 width: 50px; 21 height: 50px; 22 border-radius: inherit; 23 scale: 0; 24 z-index: -1; 25 background-color: rgb(193, 163, 98); 26 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 27} 28 29.button:hover::before { 30 scale: 3; 31} 32 33.button:hover { 34 color: #212121; 35 scale: 1.1; 36 box-shadow: 0 0px 20px rgba(193, 163, 98,0.4); 37} 38 39.button:active { 40 scale: 1; 41} 42 43 44
6K views
6K views
Comments
MIT License