/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
  --mud: #8B4513;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom,skyblue 70%,var(--mud));
  transition: .4s;
  border-radius: 30px;
  border: 2px solid black;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  transition: .4s;
}

.plant {
  position: absolute;
  bottom: 3px;
  right: -30px;
  z-index: 3;
  opacity: 0;
}

.seed {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.3em;
  bottom: 0.3em;
  transition: .4s;
}

.switch input:checked + .slider {
  background-color: #156829;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #156829;
}

.switch input:checked + .slider:before,
.switch input:checked + .slider .seed {
  transform: translateX(1.5em);
}

.switch input:checked + .slider .seed {
  opacity: 0;
}

.switch input:checked + .slider .plant {
  animation: zoomIn 0.5s forwards;
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

100% {
    transform: scale(1);
    opacity: 1;
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Plant Growing Toggle Switch with HTML and CSS

Interactive UI elements can breathe life into your website, and this creative toggle switch does exactly that. Inspired by nature and modern CSS techniques, this plant-themed toggle switch uses HTML and CSS to show a seed transform into a plant when toggled on.

This kind of animation is not just functional but also visually engaging, ideal for eco-related websites, gardening apps, educational platforms, or just to add a touch of personality to your design.

What This Toggle Switch Does

At first glance, the switch displays a seed icon inside a stylish slider. When the user toggles the switch:

The seed smoothly slides to the right and disappears
A plant icon grows from the toggle area using a subtle scale animation
The background color of the slider changes to represent soil and growth

All of this is done using pure HTML and CSS — no JavaScript is required.

Features and Highlights

1. Custom Design with SVG Icons

The switch uses embedded SVGs:

A seed icon (rendered in earthy tones)
A growing plant illustration (in vibrant green)

These SVGs are styled and animated using CSS transitions and keyframes.

2. Smooth Transformations

The switch animation involves:

A sliding motion for the seed using transform: translateX(...)
A fade-in and zoom effect for the plant using a custom @keyframes animation

This creates a polished and organic feel as the toggle moves between states.

3. Responsive and Lightweight

Built entirely with HTML and CSS, this toggle is:

Mobile-friendly
Fast loading
Easy to customize

You can adjust the colors, icons, or add new animations without worrying about extra scripts.

Ideal Use Cases

This plant-themed toggle switch can be a great fit for:

Sustainability or eco-conscious websites
Gardening and agriculture blogs
Kids’ learning platforms
Creative personal portfolios
Custom dark/light mode switches with visual metaphors

It’s a small detail that can make a big difference in user engagement.

Tips for Customization

Want to adapt this switch to your own theme?

Replace the plant and seed SVGs with your own icons
Modify the colors using CSS variables or change the linear gradients
Adjust the toggle dimensions for compact or extended layouts

With just a few tweaks, you can create your own signature toggle effect.

Conclusion

The plant-growing toggle switch is a perfect example of how CSS can be used creatively to animate and enrich the user experience. It’s simple, elegant, and adds a delightful touch of storytelling to any web interface.

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.