<button style="">Hover Me</button> button { position: relative; height: 60px; width: 200px; border: none; outline: none; color: #fff; background-color: #111; cursor: pointer; border-radius: 5px; font-size: 18px; font-family: 'Roboto', sans-serif; } * { margin: 0; padding: 0; } user agent stylesheet button { appearance: auto; writing-mode: horizontal-tb !important; font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-numeric: ; font-variant-east-asian: ; font-weight: ; font-stretch: ; font-size: ; font-family: ; text-rendering: auto; color: buttontext; letter-spacing: normal; word-spacing: normal; line-height: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: center; align-items: flex-start; cursor: default; box-sizing: border-box; background-color: buttonface; margin: 0em; padding: 1px 6px; border-width: 2px; border-style: outset; border-color: buttonborder; border-image: initial; } button::before { position: absolute; content: ''; top: -2px; left: -2px; height: calc(100% + 4px); width: calc(100% + 4px); border-radius: 5px; z-index: -1; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: url(data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="5" /></filter></svg>#filter); -webkit-filter: blur(5px); filter: blur(5px); background: -webkit-linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); background-size: 400%; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; -webkit-animation: animate 20s linear infinite; animation: animate 20s linear infinite; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter