Simple Neon Button with hover effect. Just plain css and html code. Implemented this few years back, thought I should share it.
HTML
<button type="button" id="info">Info</button>
<button type="button" id="success">Success</button>
<button type="button" id="warning">Warning</button>
<button type="button" id="error">Error</button>
<button type="button" id="default">Default</button>
CSS/SCSS
CSS
body button {
box-sizing: border-box;
cursor: pointer;
color: #FFFFFF;
padding: 10px 20px;
margin: 10px;
font-size: 20px;
border: none;
border-radius: 6px;
}
body button#info {
background-color: #0652DD;
border: 5px solid #1d6bf9;
box-shadow: 8px 8px 10px 0px #043693;
}
body button#info:hover {
transform: translate(8px, 8px);
border: 5px solid #043693;
box-shadow: inset 0px 0px 26px 1px #0540ab;
}
body button#success {
background-color: #A3CB38;
border: 5px solid #b6d660;
box-shadow: 8px 8px 10px 0px #749126;
}
body button#success:hover {
transform: translate(8px, 8px);
border: 5px solid #749126;
box-shadow: inset 0px 0px 26px 1px #84a52b;
}
body button#warning {
background-color: #F79F1F;
border: 5px solid #f9b450;
box-shadow: 8px 8px 10px 0px #c37607;
}
body button#warning:hover {
transform: translate(8px, 8px);
border: 5px solid #c37607;
box-shadow: inset 0px 0px 26px 1px #db8508;
}
body button#error {
background-color: #EA2027;
border: 5px solid #ee4f54;
box-shadow: 8px 8px 10px 0px #ad1016;
}
body button#error:hover {
transform: translate(8px, 8px);
border: 5px solid #ad1016;
box-shadow: inset 0px 0px 26px 1px #c41319;
}
body button#default {
background-color: #EE5A24;
border: 5px solid #f27e53;
box-shadow: 8px 8px 10px 0px #b73b0e;
}
body button#default:hover {
transform: translate(8px, 8px);
border: 5px solid #b73b0e;
box-shadow: inset 0px 0px 26px 1px #cf4310;
}
SCSS
body {
button {
box-sizing: border-box;
cursor: pointer;
color: #ffffff;
padding: 10px 20px;
margin: 10px;
font-size: 20px;
border: none;
border-radius: 6px;
}
button#info {
background-color: #0652dd;
border: 5px solid #1d6bf9;
box-shadow: 8px 8px 10px 0px #043693;
&:hover {
transform: translate(8px, 8px);
border: 5px solid #043693;
box-shadow: inset 0px 0px 26px 1px #0540ab;
}
}
button#success {
background-color: #a3cb38;
border: 5px solid #b6d660;
box-shadow: 8px 8px 10px 0px #749126;
&:hover {
transform: translate(8px, 8px);
border: 5px solid #749126;
box-shadow: inset 0px 0px 26px 1px #84a52b;
}
}
button#warning {
background-color: #f79f1f;
border: 5px solid #f9b450;
box-shadow: 8px 8px 10px 0px #c37607;
&:hover {
transform: translate(8px, 8px);
border: 5px solid #c37607;
box-shadow: inset 0px 0px 26px 1px #db8508;
}
}
button#error {
background-color: #ea2027;
border: 5px solid #ee4f54;
box-shadow: 8px 8px 10px 0px #ad1016;
&:hover {
transform: translate(8px, 8px);
border: 5px solid #ad1016;
box-shadow: inset 0px 0px 26px 1px #c41319;
}
}
button#default {
background-color: #ee5a24;
border: 5px solid #f27e53;
box-shadow: 8px 8px 10px 0px #b73b0e;
&:hover {
transform: translate(8px, 8px);
border: 5px solid #b73b0e;
box-shadow: inset 0px 0px 26px 1px #cf4310;
}
}
}
That's it.
You can check working demo here Codepen.
Top comments (0)