<button class="btn">
  <div class="wrapper">
    <p class="text">Flowers</p>

.btn {
  height: 4em;
  width: 12em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0px solid black;
  cursor: pointer;
}

.wrapper {
  height: 2em;
  width: 8em;
  position: relative;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 17px;
  z-index: 1;
  color: #000;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.7);
  transition: all 0.5s ease;
}

.flower {
  display: grid;
  grid-template-columns: 1em 1em;
  position: absolute;
  transition: grid-template-columns 0.8s ease;
}

.flower1 {
  top: -12px;
  left: -13px;
  transform: rotate(5deg);
}

.flower2 {
  bottom: -5px;
  left: 8px;
  transform: rotate(35deg);
}

.flower3 {
  bottom: -15px;
  transform: rotate(0deg);
}

.flower4 {
  top: -14px;
  transform: rotate(15deg);
}

.flower5 {
  right: 11px;
  top: -3px;
  transform: rotate(25deg);
}

.flower6 {
  right: -15px;
  bottom: -15px;
  transform: rotate(30deg);
}

.petal {
  height: 1em;
  width: 1em;
  border-radius: 40% 70% / 7% 90%;
  background: linear-gradient(#07a6d7, #93e0ee);
  border: 0.5px solid #96d1ec;
  z-index: 0;
  transition: width 0.8s ease, height 0.8s ease;
}

.two {
  transform: rotate(90deg);
}

.three {
  transform: rotate(270deg);
}

.four {
  transform: rotate(180deg);
}

.btn:hover .petal {
  background: linear-gradient(#0761d7, #93bdee);
  border: 0.5px solid #96b4ec;
}

.btn:hover .flower {
  grid-template-columns: 1.5em 1.5em;
}

.btn:hover .flower .petal {
  width: 1.5em;
  height: 1.5em;
}

.btn:hover .text {
  background: rgba(255, 255, 255, 0.4);
}

.btn:hover div.flower1 {
  animation: 15s linear 0s normal none infinite running flower1;
}

@keyframes flower1 {
  0% {
    transform: rotate(5deg);
  }

100% {
    transform: rotate(365deg);
  }
}

.btn:hover div.flower2 {
  animation: 13s linear 1s normal none infinite running flower2;
}

@keyframes flower2 {
  0% {
    transform: rotate(35deg);
  }

100% {
    transform: rotate(-325deg);
  }
}

.btn:hover div.flower3 {
  animation: 16s linear 1s normal none infinite running flower3;
}

@keyframes flower3 {
  0% {
    transform: rotate(0deg);
  }

100% {
    transform: rotate(360deg);
  }
}

.btn:hover div.flower4 {
  animation: 17s linear 1s normal none infinite running flower4;
}

@keyframes flower4 {
  0% {
    transform: rotate(15deg);
  }

100% {
    transform: rotate(375deg);
  }
}

.btn:hover div.flower5 {
  animation: 20s linear 1s normal none infinite running flower5;
}

@keyframes flower5 {
  0% {
    transform: rotate(25deg);
  }

100% {
    transform: rotate(-335deg);
  }
}

.btn:hover div.flower6 {
  animation: 15s linear 1s normal none infinite running flower6;
}

@keyframes flower6 {
  0% {
    transform: rotate(30deg);
  }

100% {
    transform: rotate(390deg);
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Animated Flower Button with CSS – Beautiful Bloom Effect on Hover

Want to make your buttons stand out and add a touch of visual elegance to your website? This flower-themed button animation, built with pure HTML and CSS, is a creative way to surprise users with a blooming floral effect when they hover over the button.

What Is the Flower Button Animation?

This unique button transforms into a blooming flower garden on hover. Using CSS grid, gradients, and animations, multiple flower shapes appear and rotate around the button, creating an eye-catching and delightful user interaction.

At the center is a clear call-to-action — a label reading “Flowers” — surrounded by six animated floral shapes.

Key Features of This Button Design

✿ Animated Petals

Each flower is composed of four CSS petal elements, arranged in a grid. On hover, the petals expand in size, and the flowers begin rotating using custom keyframe animations.

✿ Soft Gradient Colors

The petals feature smooth blue gradients, giving them a natural, soft look — almost like watercolor or pastel art. On hover, the colors slightly change, simulating light movement and depth.

✿ Lightweight and Framework-Free

This effect uses no JavaScript, no SVG, and no external libraries — just clean HTML and CSS. That means:

Fast load time
Easy customization
Perfect for all modern browsers

How the Flower Animation Works

Structure: The button includes six .flower containers, each containing four .petal divs.
Styling: CSS Grid is used to arrange the petals in a 2×2 formation, and gradients create a smooth color tone.
Interaction:
- On hover, the petal size increases and the grid expands.
- Each .flower gets an animation that rotates it infinitely at different speeds and directions.

This adds not just visual motion, but life-like variation in how each flower spins.

Use Cases

This beautiful flower animation is ideal for:

Nature-themed websites
Wedding or floral business pages
Creative portfolios
Spring and seasonal landing pages
Decorative CTA buttons for lifestyle blogs

Whether you’re a web designer or developer looking to add a touch of nature-inspired animation, this button is a perfect choice.

Customize It Your Way

You can easily tweak this effect to match your design:

Change the colors to reflect different flower styles.
Adjust the number of flowers or speed of animation.
Replace the “Flowers” text with any CTA like “Explore,” “Get Started,” or “See More.”

Final Thoughts

This CSS flower button animation shows how far creativity can go with just simple code. It’s elegant, interactive, and adds charm to any interface — without relying on JavaScript or images.

Perfect for modern, engaging UI designs.

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.