/*bg*/
/*txt*/
/*success*/
.buttons {
  display: flex;
  justify-content: space-around;
  top: 20px;
  left: 20px;
}

.buttons button {
  width: 150px;
  height: 50px;
  background-color: white;
  margin: 20px;
  color: #568fa6;
  position: relative;
  overflow: hidden;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

.buttons button:before, .buttons button:after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: #44d8a4;
  transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.buttons button:before {
  right: 0;
  top: 0;
  transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.buttons button:after {
  left: 0;
  bottom: 0;
}

.buttons button span {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  z-index: 1;
}

.buttons button span:before, .buttons button span:after {
  content: "";
  position: absolute;
  width: 2px;
  height: 0;
  background-color: #44d8a4;
  transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.buttons button span:before {
  right: 0;
  top: 0;
  transition: all 0.5s cubic-bezier(0.35, 0.1, 0.25, 1);
}

.buttons button span:after {
  left: 0;
  bottom: 0;
}

.buttons button p {
  padding: 0;
  margin: 0;
  transition: all 0.4s cubic-bezier(0.35, 0.1, 0.25, 1);
  position: absolute;
  width: 100%;
  height: 100%;
}

.buttons button p:before, .buttons button p:after {
  position: absolute;
  width: 100%;
  transition: all 0.4s cubic-bezier(0.35, 0.1, 0.25, 1);
  z-index: 1;
  left: 0;
}

.buttons button p:before {
  content: attr(data-title);
  top: 50%;
  transform: translateY(-50%);
}

.buttons button p:after {
  content: attr(data-text);
  top: 150%;
  color: #44d8a4;
}

.buttons button:hover:before, .buttons button:hover:after {
  width: 100%;
}

.buttons button:hover span {
  z-index: 1;
}

.buttons button:hover span:before, .buttons button:hover span:after {
  height: 100%;
}

.buttons button:hover p:before {
  top: -50%;
  transform: rotate(5deg);
}

.buttons button:hover p:after {
  top: 50%;
  transform: translateY(-50%);
}

.buttons button.start {
  background-color: #44d8a4;
  box-shadow: 0px 5px 10px -10px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.buttons button.start p:before {
  top: -50%;
  transform: rotate(5deg);
}

.buttons button.start p:after {
  color: white;
  transition: all 0s ease;
  content: attr(data-start);
  top: 50%;
  transform: translateY(-50%);
  animation: start 0.3s ease;
  animation-fill-mode: forwards;
}

@keyframes start {
  from {
    top: -50%;
  }
}

.buttons button.start:hover:before, .buttons button.start:hover:after {
  display: none;
}

.buttons button.start:hover span {
  display: none;
}

.buttons button:active {
  outline: none;
  border: none;
}

.buttons button:focus {
  outline: 0;
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Animated Start Button with Sliding Text and Border Effects Using HTML & CSS

Interactive buttons add life to any website, especially when they respond visually to user actions. In this post, you’ll learn how to create a stylish animated “Start” button using only HTML and CSS. This button features smooth sliding text transitions and animated border effects, making it ideal for gaming sites, app interfaces, or modern web designs.

How This Button Works

This button is built to deliver dynamic interaction without needing JavaScript. When a user hovers over the button:

Text slides out and new text slides in with motion.
Animated borders appear from all four sides.
The colors and text update visually for user feedback.

If the button is marked with the class start, it will instantly show the updated message — “Good Luck!” — and switch styling to indicate readiness for action.

Key Features Explained

1. Dual Text with Sliding Transition

Inside the button, there’s a <p> tag using data-title, data-text, and data-start attributes. These hold three different phrases:

data-title: The default button label (e.g., “New Game”).
data-text: The phrase that slides in on hover (e.g., “Start!”).
data-start: The message that appears when the button is in “start” mode (e.g., “Good luck!”).

When the user hovers over the button, the old text slides up and the new one slides in, creating a clean and modern animated effect.

2. Animated Borders on Hover

Four borders animate from each edge:

The ::before and ::after pseudo-elements create horizontal lines (top and bottom).
The span::before and span::after elements draw vertical lines (left and right).

As you hover, the borders animate from zero width or height to fully enclose the button, giving it a glowing frame effect in green (#44d8a4).

3. Active “Start” State

When the button has the class start, its appearance changes:

The background turns green.
The sliding text changes immediately to the data-start message.
Animations are disabled for a quick and bold update.
This is perfect for when a game or process has begun.

Where to Use This Button

This button design is ideal for:

Gaming websites (“Start Game”, “Play Again”)
Interactive applications with step-by-step flows
Modern landing pages needing visually engaging call-to-action buttons
Any site where user interaction should be highlighted through animated feedback

Why It’s Great for Developers

No JavaScript required: All interaction is handled purely through CSS.
Fully customizable: You can easily change the colors, text, speed, or dimensions.
Reusable component: Integrate into any project for buttons that demand attention.

Final Thoughts

This animated start button using HTML and CSS is an excellent example of what’s possible with modern styling alone. It merges creativity with user experience, making interfaces more intuitive and fun.

You can try it on your own by copying the HTML structure and applying the CSS styles. Tweak the text or animation timings to match your brand or site style.

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.