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>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.
.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>
