Learn how to create an interactive and visually appealing glowing pulse search bar using HTML and CSS. Step by step guide for web designers.
When it comes to website elements that are beautiful and must-haves, search boxes fall squarely into the must-have camp. Choose any website that comes to your mind; It will likely have a search box, probably at the top.
A search box, also known as a search bar, plays an important role on a website. It acts as a gateway to all available content and allows visitors to quickly find what they are looking for.
Let’s start making a simple, centered form with a pulsing glow effect on the input during focus.
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 to create search bar:
To get started, we will first need to create a basic HTML file. I’m going to provide you with a simple markup element (a search input and a button) that you can style however you like. below is the markup.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our search bar using HTML, and now we can move on to styling it using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <section class="webdesigntuts-workshop">
    <form action=" method=">
      <input type="search" placeholder="What are you looking for?">
      <button>Search</button>
    </form>
  </section>
</body>
</html>Step 2 to create search bar:
Once the basic HTML structure of the search input is in place, the next step is to add styling to the search input and a button using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our search bar. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our search input and a button an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url(https://fonts.googleapis.com/css?family=Cabin:400);
.webdesigntuts-workshop {
  background: #151515;
  height: 100%;
  position: absolute;
  text-align: center;
  width: 100%;
}
.webdesigntuts-workshop:before,
.webdesigntuts-workshop:after {
  content: '';
  display: block;
  height: 1px;
  left: 50%;
  margin: 0 0 0 -400px;
  position: absolute;
  width: 800px;
}
.webdesigntuts-workshop:before {
  background: #444;
  background: linear-gradient(left, #151515, #444, #151515);
  top: 192px;
}
.webdesigntuts-workshop:after {
  background: #000;
  background: linear-gradient(left, #151515, #000, #151515);
  top: 191px;
}
.webdesigntuts-workshop form {
  background: #111;
  background: linear-gradient(#1b1b1b, #111);
  border: 1px solid #000;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #272727;
  display: inline-block;
  font-size: 0px;
  margin: 150px auto 0;
  padding: 20px;
  position: relative;
  z-index: 1;
}
.webdesigntuts-workshop input {
  background: #222;
  background: linear-gradient(#333, #222);
  border: 1px solid #444;
  border-radius: 5px 0 0 5px;
  box-shadow: 0 2px 0 #000;
  color: #888;
  display: block;
  float: left;
  font-family: 'Cabin', helvetica, arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  height: 40px;
  margin: 0;
  padding: 0 10px;
  text-shadow: 0 -1px 0 #000;
  width: 200px;
}
.ie .webdesigntuts-workshop input {
  line-height: 40px;
}
.webdesigntuts-workshop input::-webkit-input-placeholder {
  color: #888;
}
.webdesigntuts-workshop input:-moz-placeholder {
  color: #888;
}
.webdesigntuts-workshop input:focus {
  animation: glow 800ms ease-out infinite alternate;
  background: #222922;
  background: linear-gradient(#333933, #222922);
  border-color: #393;
  box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
  color: #efe;
  outline: none;
}
.webdesigntuts-workshop input:focus::-webkit-input-placeholder {
  color: #efe;
}
.webdesigntuts-workshop input:focus:-moz-placeholder {
  color: #efe;
}
.webdesigntuts-workshop button {
  background: #222;
  background: linear-gradient(#333, #222);
  box-sizing: border-box;
  border: 1px solid #444;
  border-left-color: #000;
  border-radius: 0 5px 5px 0;
  box-shadow: 0 2px 0 #000;
  color: #fff;
  display: block;
  float: left;
  font-family: 'Cabin', helvetica, arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0;
  position: relative;
  text-shadow: 0 -1px 0 #000;
  width: 80px;
}
.webdesigntuts-workshop button:hover,
.webdesigntuts-workshop button:focus {
  background: #292929;
  background: linear-gradient(#393939, #292929);
  color: #5f5;
  outline: none;
}
.webdesigntuts-workshop button:active {
  background: #292929;
  background: linear-gradient(#393939, #292929);
  box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
  top: 1px;
}
@keyframes glow {
  0% {
    border-color: #393;
    box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
  }
  100% {
    border-color: #6f6;
    box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
  }
}
Final Output of Search Bar:
Conclusion:
In conclusion, creating a glowing pulse search bar using HTML and CSS is a great way to enhance the user experience on your website. By following the steps outlined in this tutorial, you will be able to create a visually appealing and interactive search bar that will make your website stand out. Feel free to experiment and make modifications to the design to make it your own.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
