<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