Button by KhaledMatalkah
#e8e8e8
1@keyframes glowing-pulse { 2 0% { 3 box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); 4 } 5 6 50% { 7 box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.4); 8 } 9 10 100% { 11 box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); 12 } 13} 14 15.button { 16 position: relative; 17 display: inline-block; 18 background: linear-gradient(to right, #FFB900, #FF7730); 19 background-size: 200% auto; 20 border: none; 21 border-radius: 25px; 22 color: white; 23 padding: 10px 20px; 24 font-size: 18px; 25 text-transform: uppercase; 26 box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); 27 animation: glowing-pulse 2s infinite; 28 transition: color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; 29} 30 31.button::before { 32 content: ""; 33 position: absolute; 34 top: -5px; 35 left: -5px; 36 right: -5px; 37 bottom: -5px; 38 border-radius: 30px; 39 box-shadow: 0 0 20px #FF7730; 40 opacity: 0; 41 pointer-events: none; 42 transition: opacity 0.3s ease; 43} 44 45.button::after { 46 content: ""; 47 position: absolute; 48 top: 50%; 49 left: 50%; 50 transform: translate(-50%, -50%); 51} 52 53.button:hover { 54 color: #FFB900; 55 box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4); 56 transform: scale(1.05); 57 background-position: right center; 58} 59 60.button:hover::before { 61 opacity: 1; 62} 63
445 views
Variation of abutton
MIT License