.ui-btn {
  --btn-default-bg: rgb(41, 41, 41);
  --btn-padding: 15px 20px;
  --btn-hover-bg: rgb(51, 51, 51);
  --btn-transition: .3s;
  --btn-letter-spacing: .1rem;
  --btn-animation-duration: 1.2s;
  --btn-shadow-color: rgba(0, 0, 0, 0.137);
  --btn-shadow: 0 2px 10px 0 var(--btn-shadow-color);
  --hover-btn-color: #FAC921;
  --default-btn-color: #fff;
  --font-size: 16px;
  /* 👆 this field should not be empty */
  --font-weight: 600;
  --font-family: Menlo,Roboto Mono,monospace;
  /* 👆 this field should not be empty */
}

/* button settings 👆 */

.ui-btn {
  box-sizing: border-box;
  padding: var(--btn-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default-btn-color);
  font: var(--font-weight) var(--font-size) var(--font-family);
  background: var(--btn-default-bg);
  border: none;
  cursor: pointer;
  transition: var(--btn-transition);
  overflow: hidden;
  box-shadow: var(--btn-shadow);
}

.ui-btn span {
  letter-spacing: var(--btn-letter-spacing);
  transition: var(--btn-transition);
  box-sizing: border-box;
  position: relative;
  background: inherit;
}

.ui-btn span::before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  background: inherit;
}

.ui-btn:hover, .ui-btn:focus {
  background: var(--btn-hover-bg);
}

.ui-btn:hover span, .ui-btn:focus span {
  color: var(--hover-btn-color);
}

.ui-btn:hover span::before, .ui-btn:focus span::before {
  animation: chitchat linear both var(--btn-animation-duration);
}

@keyframes chitchat {
  0% {
    content: "#";
  }

5% {
    content: ".";
  }

10% {
    content: "^{";
  }

15% {
    content: "-!";
  }

20% {
    content: "#$_";
  }

25% {
    content: "№:0";
  }

30% {
    content: "#{+.";
  }

35% {
    content: "@}-?";
  }

40% {
    content: "?{4@%";
  }

45% {
    content: "=.,^!";
  }

50% {
    content: "?2@%";
  }

55% {
    content: "\;1}]";
  }

60% {
    content: "?{%:%";
    right: 0;
  }

65% {
    content: "|{f[4";
    right: 0;
  }

70% {
    content: "{4%0%";
    right: 0;
  }

75% {
    content: "'1_0<";
    right: 0;
  }

80% {
    content: "{0%";
    right: 0;
  }

85% {
    content: "]>'";
    right: 0;
  }

90% {
    content: "4";
    right: 0;
  }

95% {
    content: "2";
    right: 0;
  }

100% {
    content: "";
    right: 0;
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Glitch Text Animation Button Using Only HTML & CSS

If you’re looking to give your buttons a cool, cyber-style effect without writing JavaScript, this glitch animation button is a powerful and creative way to make your interface stand out. This effect mimics a random text “chitchat” or “code-like” flicker animation that runs when the user hovers over the button.

What Does This Button Do?

This button starts out simple — with clean, monospace typography and a dark background. But when you hover over it, the button text color changes, and a series of animated characters rapidly flash next to the main text. This animated sequence creates a digital glitch or code-hacking vibe, like something out of a sci-fi terminal.

How the Button Animation Works

1. Button Basics

The .ui-btn class styles the button using custom CSS variables:

A dark default background
Rounded padding and strong font weight
A sleek monospace font for a developer-style appearance
Soft drop shadow for elevation

2. Text Styling with `span`

The button’s label is wrapped in a span element, which is positioned relatively. The actual animated characters are created using a ::before pseudo-element attached to this span.

3. Keyframe Magic: `chitchat` Animation

This is where the glitch effect comes alive.

The @keyframes chitchat defines a rapid-fire series of content changes.
The text switches from symbols like #, ., {, %, and so on — simulating fast-changing code or corrupted data.
The animation plays on hover or focus, giving the impression of dynamic motion and energy.

Why Use a Glitch Effect Button?

Modern and Trendy: Adds a futuristic or hacker aesthetic.
Pure CSS: No JavaScript needed, meaning it’s lightweight and easy to implement.
Customizable: You can easily change the glitch symbols, duration, or colors.
Eye-Catching: Perfect for CTAs, tech websites, portfolios, or code playgrounds.

Where to Use This Button

This button works great in:

Developer portfolios
Landing pages for tech tools
Cyberpunk-themed designs
Projects promoting creativity, innovation, or web animation

Tips for Customization

Change the @keyframes to use different symbols or emoji.
Adjust --btn-animation-duration for faster or slower effects.
Modify --hover-btn-color to match your site’s brand color.
Use different fonts for a unique aesthetic — monospace fonts create a “code” feel.

Final Thoughts

This glitch button is a fantastic way to impress visitors with just a few lines of CSS. It’s a small touch, but it makes a big difference in the overall feel of your site. Whether you’re building a personal portfolio, app dashboard, or experimental project — it adds a layer of creativity and interactivity that users remember.

Try it, modify it, and make it your own.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.