Add YouTube Style Search Button To Your Blog

If you have visited YouTube , then you must have seen the the Search Box at the top of the site along with the Search button. Its a very simple looking button using hover effects to show shadow whenever you move the mouse over the Search button. This is very simple to implement on your blog for the search button and you can also use it for the Adsense Blog Search button just as I am using it on this blog. We are going to use the CSS moz-box-shadow to achieve this effect.



Adding this is very simple thing. If you already have a search box on your blog then check its code and if you don't have it you can use the Google Adsense search box. All you have to do is find the part of the code where you will get type="submit" . In that part you will have to change the value of value as shown: value="sbutton" . This is how it should appear.

<input class="sbutton" value="Search" name="sa" type="submit" />

Once you have done that, you will have to add its CSS part to make it work. If the code of the search box is present in the template, then you will have to add the CSS part of the code in the CSS section. But if you are using the Search box as a widget, then you will add it in the widget itself, considering its a HTML/JavaScript widget.

Here's the CSS part. Remove the <style> and </style> part of the code if you are pasting it in the CSS section.

<style>
.sbutton{
background:#F4F4F4;
width:70px;
height:25px;
border:none;
-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.25);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.25);
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
border:1px solid #CCCCCC;
}

.sbutton:hover {
-webkit-box-shadow:  0 0 4px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.5);
}
</style>

That's it, now you have added the YouTube style search button to your blog. If you are facing any problem, then do tell us. Hope you enjoyed the post.

[img credit]