This post is saved as a draft.
#212121
1button { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%,-50%); 6 width: 130px; 7 height: 45px; 8 text-align: center; 9 line-height: 45px; 10 color: #fff; 11 font-size: 15px; 12 text-transform: uppercase; 13 text-decoration: none; 14 font-family: sans-serif; 15 box-sizing: border-box; 16 background: linear-gradient(90deg,#03a9f4,#ffeb3b,#f441af,#03a9f4); 17 background-size: 400%; 18 border-radius: 30px; 19 z-index: 1; 20 border: none; 21 outline: none; 22} 23 24button:hover { 25 animation: animate 6s linear infinite; 26} 27 28@keyframes animate { 29 0% { 30 background-position: 0%; 31 } 32 33 100% { 34 background-position: 400%; 35 } 36} 37 38button::before { 39 content: ''; 40 position: absolute; 41 top: -5px; 42 left: -5px; 43 right: -5px; 44 bottom: -5px; 45 z-index: -1; 46 background: linear-gradient(90deg,#03a9f4,#ffeb3b,#f441af,#03a9f4); 47 border-radius: 40px; 48 filter: blur(20px); 49 opacity: 0; 50 transition: 0.5s; 51} 52 53button:hover::before { 54 filter: blur(20px); 55 opacity: 1; 56 animation: animate 6s linear infinite; 57}
Variation of abutton
Variation of abutton