Stylish Animated Expandable Search Bar CSS Code (Copy & Paste)

A search bar is one of the most important elements of a website. However, a default, clunky search box can ruin your clean design. If you want to save space and make your blog look modern, an Animated Expandable Search Bar is the perfect solution.

In this tutorial, I'm sharing a pure CSS code snippet for a stylish search box. By default, it looks like a simple search icon. But when you click on it, it smoothly expands into a full search bar. It’s super space-efficient and provides a great user experience (UX).

Preview of Animated Expandable Search Bar with Search Icon

Why use this Animated Search Bar?

Space Saving: It stays compact as an icon and only takes up space when needed. Perfect for minimalistic headers.
Smooth Animation: The CSS transition effect makes your website feel more premium and interactive.
Pure CSS: No heavy JavaScript required. It runs fast and works on all browsers.
Fully Responsive: It adjusts perfectly to mobile screens without breaking your layout.

Live Preview

Click or hover over the search icon below to see it expand!

HTML & CSS Code

Copy the code below and paste it into your blog post or sidebar widget.

<style>
.search-box {
  width: fit-content;
  height: fit-content;
  position: relative;
}

.input-search {
  height: 50px;
  width: 50px;
  border-style: none;
  padding: 10px;
  font-size: 18px;
  letter-spacing: 2px;
  outline: none;
  border-radius: 25px;
  transition: all .5s ease-in-out;
  background-color: #22a6b3; /* Icon Background Color */
  padding-right: 40px;
  color: #fff;
}

.input-search::placeholder {
  color: rgba(255,255,255,0.5);
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 100;
}

.btn-search {
  width: 50px;
  height: 50px;
  border-style: none;
  font-size: 20px;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  right: 0px;
  color: #ffffff;
  background-color: transparent;
  pointer-events: none;
}

.input-search:focus {
  width: 300px; /* Expanded Width */
  border-radius: 0px;
  background-color: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
}
/* For Demo Hover Effect (Optional) */
.search-box:hover > .input-search {
  width: 300px;
  border-radius: 0px;
  background-color: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
</style>

<!-- Search Bar HTML -->
<div class="search-box">
    <button class="btn-search"><i class="fas fa-search"></i></button>
    <input type="text" class="input-search" placeholder="Type to Search...">
</div>

How to Customize

You can easily customize the look and feel of this search bar to match your blog theme. Here is a step-by-step guide:

1. How to Change the Background Color

The default color is a nice Teal (#22a6b3). To change this, find the .input-search class in the CSS and look for:

background-color: #22a6b3;

Replace #22a6b3 with your desired Hex code (e.g., #ff4757 for Red, #2ed573 for Green).

2. How to Change the Expanded Width

If you want the search bar to be wider or shorter when opened, adjust the width in the .input-search:focus section.

Currently: width: 300px;
For a wider bar: Change to 400px or 100%.
For a shorter bar: Change to 200px.

3. How to Change the Placeholder Text

Find the HTML part at the bottom:

placeholder="Type to Search..."

Change "Type to Search..." to anything you like, such as "Search here..." or "Find content...".

Conclusion

This animated search bar is a great way to add a modern touch to your Blogspot layout. It saves space while keeping the functionality intact. Try adding this to your header or sidebar today! If you have any issues, drop a comment below.

Copy Paste Web Tips