Neon Hover Button

Open In Editor Video Publish Your Code

* {
    font-family: 'Poppins', sans-serif; 
  }
  body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #212121; 
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; 
}
.button {
    margin: 0;
    height: auto;
    background: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
  }
  .button {
    --border-right: 6px;
    --text-stroke-color: rgba(255,255,255,0.6);
    --animation-color: #03959e;
    --fs-size: 2em;
    letter-spacing: 3px;
    text-decoration: none;
    font-size: var(--fs-size);
    font-family: "Arial";
    position: relative;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px var(--text-stroke-color);
  }
  .hover-text {
    position: absolute;
    box-sizing: border-box;
    content: attr(data-text);
    color: var(--animation-color);
    width: 0%;
    inset: 0;
    border-right: var(--border-right) solid var(--animation-color);
    overflow: hidden;
    transition: 0.5s;
    -webkit-text-stroke: 1px var(--animation-color);
  }
  .button:hover .hover-text {
    width: 100%;
    filter: drop-shadow(0 0 23px var(--animation-color))
  }

Neon Hover Button

Recommended

social media icon with hover

Animated Link Hover

Hover Button Animation CSS

HTML

CSS

JS

Recommended

social media icon with hover

Animated Link Hover

Hover Button Animation CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS