Learn how to create an interactive and visually appealing glowing pulse search bar using HTML and CSS. Step by step guide for web designers.
Table of Contents
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.
Join My Telegram Channel to Download the Project: Click Here
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 (HTML Code):
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.
Let's break down the HTML code step by step:
<!DOCTYPE html>
- This is the doctype declaration. It tells the browser that the document is an HTML5 document.
<html lang="en">
- The
<html>element is the root element of the HTML document. - The lang="en" attribute specifies the language of the document as English.
<head>
- The
<head>element contains meta-information about the HTML document.
<meta charset="UTF-8">
- This specifies the character encoding for the document, ensuring that the text is properly displayed.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- This sets the document mode in Internet Explorer to the highest mode available.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- This meta tag makes the website responsive by setting the viewport to match the device's width and scale.
<title>Glowing Pulse Search Bar</title>
- The
<title>element specifies the title of the document, which appears in the browser's title bar or tab.
<link rel="stylesheet" type="text/css" href="styles.css">
- This links an external CSS file (styles.css) to the HTML document. The styles defined in styles.css will be applied to the document.
<body>
- The
<body>element contains the content of the HTML document that is displayed in the web browser.
<section class="webdesigntuts-workshop">
- The
<section>element defines a section in the document. Here, it is given a class name webdesigntuts-workshop for styling purposes.
<form action="" method="">
- The
<form>element represents a form for user input. The action attribute specifies where to send the form data when the form is submitted. Here, it's empty, meaning no action is specified. - The method attribute specifies the HTTP method to use when sending form data. It's also empty here, meaning no method is specified.
<input type="search" placeholder="What are you looking for?">
- The
<input>element is used to create an interactive control for web-based forms to accept user data. - type="search" specifies that this input field is a search box.
- placeholder="What are you looking for?" provides a hint to the user about what to enter in the input field.
<button>Search</button>
- The
<button>element represents a clickable button. The text "Search" appears on the button.
Closing Tags
</form>,</section>, and</body>close the respective elements that were opened earlier.
This is the basic structure of our search bar using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
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.
Here's a breakdown of the key sections and styles:
Font Import:
@import url(https://fonts.googleapis.com/css?family=Cabin:400);
- This line imports the 'Cabin' font from Google Fonts, which will be used in the form.
Container Styling:
.webdesigntuts-workshop {
background: #151515;
height: 100%;
position: absolute;
text-align: center;
width: 100%;
}
- This styles the main container of the form, giving it a dark background color, making it full height and width, and centering its text content.
Decorative Lines:
.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;
}
- These styles create two horizontal decorative lines using :before and :after pseudo-elements. They use linear gradients for a subtle visual effect and are positioned absolutely within the container.
Form Styling:
.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;
}
- The form itself has a dark background with a gradient, rounded corners, a subtle inner shadow, and padding. It is centered with a top margin.
Input Field Styling:
.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;
}
- Input fields have a dark background with a gradient, rounded left corners, a shadow, and light gray text. The font is 'Cabin', and the text is styled with a shadow.
Placeholder Styling:
.webdesigntuts-workshop input::-webkit-input-placeholder,
.webdesigntuts-workshop input:-moz-placeholder {
color: #888;
}
- These styles set the placeholder text color to light gray.
Input Focus Styling:
.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;
}
- When an input field is focused, it changes to a greenish background, the border and box shadow animate with a glowing effect, and the text color changes to light green.
Button Styling:
.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;
}
- Buttons have a dark background with a gradient, a shadow, and rounded right corners. They are styled to match the input fields.
Button Hover and Active States:
.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;
}
- Buttons change color and shadow when hovered over or focused, and they slightly move down when clicked.
Keyframes Animation:
@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;
}
}
- This defines the glow animation used for input fields when they are focused, making the border and shadow glow with a greenish effect.
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:
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 you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
