Button by Progee45
#e8e8e8
1.custom-button { 2 position: relative; 3 display: inline-block; 4 padding: 12px 24px; 5 font-size: 18px; 6 color: #fff; 7 background-color: #ff8c00; 8 border: none; 9 border-radius: 50px; 10 cursor: pointer; 11 overflow: hidden; 12 z-index: 1; 13} 14 15.custom-button::before { 16 content: ""; 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 120%; 21 height: 120%; 22 background-color: rgba(255, 255, 255, 0.3); 23 opacity: 0; 24 transition: all 0.5s ease-in-out; 25 transform: rotate(-45deg) translate(-50%, -50%); 26 z-index: -1; 27} 28 29.custom-button:hover::before { 30 opacity: 1; 31 transform: rotate(-45deg) translate(-50%, -50%) scale(1.2); 32} 33 34.custom-button span { 35 position: relative; 36 z-index: 2; 37} 38 39.custom-button:hover { 40 background-color: #ff5722; 41} 42
517 views
517 views
MIT License