Button by mRcOol7
#e8e8e8
1.ring-futuristic-button { 2 width: 200px; 3 height: 60px; 4 background: linear-gradient(to bottom right, #ff7e5f, #feb47b); 5 color: white; 6 font-size: 16px; 7 border: none; 8 border-radius: 10px; 9 cursor: pointer; 10 outline: none; 11 position: relative; 12 overflow: hidden; 13 display: flex; 14 justify-content: center; 15 align-items: center; 16 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 17 letter-spacing: 1px; 18 transition: transform 0.5s, background 0.5s, color 0.3s, box-shadow 0.3s; 19 position: relative; 20 z-index: 1; 21 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 22} 23 24.ring-futuristic-button::before { 25 content: ""; 26 position: absolute; 27 width: 100%; 28 height: 100%; 29 border: 2px solid rgba(255, 255, 255, 0.5); 30 border-radius: 50%; 31 box-sizing: border-box; 32 opacity: 0; 33 transform: scale(0); 34 transition: transform 0.5s, opacity 0.5s; 35} 36 37.ring-futuristic-button:hover { 38 background: linear-gradient(to bottom right, #feb47b, #ff7e5f); 39 color: #fff; 40 transform: scale(1.05); 41 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); 42} 43 44.ring-futuristic-button:hover::before { 45 opacity: 1; 46 transform: scale(2); 47} 48 49.ring-futuristic-button:active { 50 transform: scale(0.95); 51 transition: transform 0.1s; 52} 53
204 views
204 views
MIT License