How to add a Search Button like Web Insights in GP

In this tutorial, we gonna make a custom Search button like Web Insights. His subscribers want to Add the stylish Search button which he is using on his website. Web Insights can make the search button tutorial later. But today at this time I am making this tutorial for helping those bloggers who actually need this search button CSS for matching their whole site with brand color.

Note: I copied the CSS code from Web Insights website via Inspect Element, so all the CSS credit goes to Web Insights. I just give you the tutorial, so you can Implement this easily.

Add Search button on Sidebar

• Log in to your WordPress website & Go to customize
• Now, click on widgets and go to Right Sidebar
• After that, click on the + or Add
• Then, find the Search button by scrolling or via Searching “Search”
• And now click the Search block to Add.

After adding the search button you can adjust the positions easily. I recommend you to make it 1st or 2nd widgets. Now click Publish.

Add Additional CSS

After adding the search button its looks like an old poor search design. So now we gonna add the additional CSS to make it a cool search button like Web Insights.

• Go to customize, and then Additional CSS
• Now paste this code at the buttom

/*Search*/

.wp-block-search .wp-block-search__input{
	  flex-grow: 1;
    min-width: 3em;
    border: 1px solid #949494;
	
}

.wp-block-search__input{
	   border: none!important;
    border-bottom: 1px solid #cdd6d1!important;
    background: none!important;
    font-size: 15px;
    padding: 5px 2px!important;
}

/*ModifyTrick.com*/
input:focus-visible{
	    outline: -webkit-focus-ring-color auto 0px;
}

.wp-block-search .wp-block-search__button{
	   background: #f7f7f7;
    border: 1px solid #ccc;
    padding: .375em .625em;
    color: #32373c;
    margin-left: .625em;
    word-break: normal;
}

.wp-block-search__button{
	  border-radius:20px;
	  font-size: 13px!important;
    padding: 8px 20px!important;
    text-align: center;
    color: white!important;
    box-shadow: rgba(23, 43, 99, .3) 0 7px 28px!important;
}

.wp-block-search__button{
	    background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 50%, #1FA2FF 100%)!important;
}

After pasting this code on Additional CSS, just click publish and visit your website.

Change color of Search button

To make the search button color match with your brand color, you just need to change 1 line of code of the last CSS .wp-block-search__button

.wp-block-search__button{
	    background-image: linear-gradient(to right, #1FA2FF 0%, #12D8FA 50%, #1FA2FF 100%)!important;
}

Just change the linear-gradient(to right, #1FA2FF 0%, #12D8FA 50%, #1FA2FF 100%) code with your brand color code. In this way, you can change the search button color.

I think this article help you a lot. Please share this article with your friends and keep visiting ModifyTrick.com