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.
HTML Code
<!doctype html>
<html lang="en">
<head>
<!-- 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>
</head>
<body>
<form>
<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>
</div>
</div>
</form>
</body>
</html>
CSS Code
.btn-style{
border-radius: 18px !important;
margin-left: -25px;
}
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.
Conclusion
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.
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.
Thanks a lot.
Greetings! Very useful advice within this post! It is the little changes that produce the biggest changes. Many thanks for sharing!
Thank you very much. Keep reading myexamnote and tell your experiences.
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!
Thank you for your comment. Please keep reading us.
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!
Thank you so much.
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.
Thank you.