How to create a search box with overlap button at end

How to create a search box with overlap button at end

Hello friends! Today also I have brought you another interesting tutorial. Even though we were knowing about coding but sometimes we don’t know how to do these kind of small things. because some of them are industrial design practices. Therefore I am trying to share my knowledge with you. What I have gain from my learning. Today we are going to learn how to create a search box with overlap button at end. Let’s begin the tutorial.

Post Outline

  • Tools and Technologies For Project
  • HTML Code
  • CSS Code
  • Code Explanation
  • Conclusion

Tools and Technologies For Project

  • XAMPP Server
  • PHP
  • CSS
  • HTML
  • Bootstrap
  • Font awesome

As always you can download or use CDN to get bootstrap. If you are creating just HTML file only you don’t need to have XAMPP server. I am creating this project as a PHP file. So I am using XAMPP server to get PHP output. Here I am using another new component which I have not used previously that is font awesome. Font awesome is a wonderful library to get all icons we meet. It has a paid version. Yet you can do so many things with free version also. As like others you have to do the download file and call font awesome CSS file in the header tag.


<!doctype html>
<html lang="en">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap-4.1.3/css/bootstrap.min.css" >
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="fontawesome-5.6.0/css/all.css" >
    <!-- Custom styles for this template-->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="scripts/jquery-3.3.1.min.js" ></script>
    <script src="scripts/jquery-ui-1.12.1/jquery-ui.js" ></script>
    <script src="scripts/popper.min.js" ></script>
    <script src="bootstrap-4.1.3/js/bootstrap.min.js" ></script>

    <title>Hello, world!</title>
      <div class="input-group mb-3 col-md-5 mt-2">
        <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
        <div class="input-group-prepend">
         <button class="btn btn-primary btn-style"><i class="fas fa-search"></i></button>

CSS Code

	border-radius: 18px !important;
	margin-left: -25px;
Image of created search box

Code Explanation

Here I have use bootstrap input and button. btn-primary class was used to get blue color button. By input-group-prepend class you can get the image or button inside the input field. It should not always be a button you can add a icon or image inside input field by using same method. If you add an image careful about the resolution. If you add input-prepend-div before input field then icon or button come at the beginning of the input field. When you add it after input field it will come to the end. Like in the tutorial.

I have used btn-style class to style the button. When you increase the border radius the button will see at the end of the input field. Then you can give minus margin and drag it inside input field. Since I used bootstrap classes one of class is prohibiting me to adding a border-radius to the button. Therefore I have used !important keyword. If your CSS are not working with correct syntax most probably it can be because of inheriting the style by another. In that case try the style with having !important keyword. Most probably it would work. When you click the input field if your button pops up. Then give higher index to your button. Then give lesser index to form. It will work.


Hope you have understood how to create a search box with overlap button at end. If you like this post please don’t forget to comment and share. Myexamnote has provide many development related articles. If you interested please check how to remove bootstrap input field border. We will meet again with another interesting tutorial. Until goodbye all.

Audy Ranathunga

Audy Ranathunga, Author of myexamnote is our most experienced author. She has been working as a blog post writer for 4 years. She joined with myexamnote before 1 year ago and she has contribute lots of valuable posts for readers.

This Post Has 10 Comments

  1. Avatar

    Very Useful tutorial. I tried to find a good tutorial about how to add a button at the end of search box, yet I couldn’t. Thanks a lot.

    1. Audy Ranathunga
      Audy Ranathunga

      Thanks a lot.

  2. Avatar
    Bennie Broomfield

    Greetings! Very useful advice within this post! It is the little changes that produce the biggest changes. Many thanks for sharing!

    1. Audy Ranathunga
      Audy Ranathunga

      Thank you very much. Keep reading myexamnote and tell your experiences.

  3. Avatar
    gralion torile

    you are really a good webmaster. The website loading speed is incredible. It seems that you’re doing any unique trick. Moreover, The contents are masterpiece. you’ve done a excellent job on this topic!

    1. Audy Ranathunga
      Audy Ranathunga

      Thank you for your comment. Please keep reading us.

  4. Avatar
    Donnetta Grew

    Excellent web site. Lots of useful information here. I am sending it to some buddies ans also sharing in delicious. And of course, thank you for your effort!

    1. Audy Ranathunga
      Audy Ranathunga

      Thank you so much.

  5. Avatar
    gralion torile

    Keep up the fantastic piece of work, I read few posts on this web site and I believe that your website is rattling interesting and contains lots of good information.

    1. Audy Ranathunga
      Audy Ranathunga

      Thank you.

Leave a Reply