DEV Community

Cover image for Neon Buttons with hover effect
Raghav Bhardwaj
Raghav Bhardwaj

Posted on Edited on

Neon Buttons with hover effect

#html #css #design

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

That's it.

You can check working demo here Codepen.

Top comments (0)