Here is how you can add search button within the text box using simple HTML code

button inside search bar html codepen

Below is the HTML code for setting up simple search UI

We’ll focus on the search text box with the class “search-input” and the button with the class “search-button”

The trick is to have no borders at all and have a negative margin

Below is the CSS code for making the button appear within the search text box

Removing the border for the search text and search button makes them look alike and adding a margin-left of -5px makes them appear as one entity.

After adding the above code in an empty page, you will have a search box that will look like this

button inside search bar html

The search appears as if the search button is within the text box.

If you have a white background, the text box will be invisible as there is no border at all. Look at the image below

Text box with no border

You can hardly see the search text box.

To fix this we will add border on top and bottom for search text and search button along with left border for the search text and right border for search button

search button within text border

Now we can clearly see that the search button is present within the search box