3D Search Bar For Blogger and Website

Stylish HTML And CSS  3D Search Box

A search box often employed by web sites to form your website user friendly. By the search box user will search the content. Adding stylish search box on your web site.This will facilitate searching data content and conjointly build a web site seem professional.

In this tutorial we tend to ar reaching to make a case for however you'll build trendy search box victimization solely HTML and CSS. Here we tend to ar demonstrate 3 sorts of trendy search box with code and demo similarly.

Create blogger page
Place This Code And Publish

Script
<div class='search-box'><style>#search-input { float: left; width: calc(93% - 40px); width: -moz-calc(100% - 40px); padding: 10px 5px 5px; margin-top: 5px; margin-left: 2px; border: 1px solid rgb(153, 153, 153); border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; border-radius: 4px; -webkit-box-shadow: rgb(204, 204, 204) 0px 5px 0px inset, rgb(152, 152, 152) 0px 6px 0px inset, rgb(223, 222, 222) 0px 11px 0px inset; box-shadow: rgb(204, 204, 204) 0px 5px 0px inset, rgb(152, 152, 152) 0px 6px 0px inset, rgb(223, 222, 222) 0px 11px 0px inset; font-size: 14px; } #search-input:focus, .search-button:focus { outline: none; } .search-button { float: left; cursor: pointer; padding: 4px 5px; margin-left: 4px; background-color: #f8b838; color: rgba(134, 79, 11, 0.8); text-transform: uppercase; font-weight: bold; border: 1px solid #99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(84, 76, 67, 0.9); -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 5px 0 #b8882a, 0 6px 0 #593a11, 0 13px 0 #ccc; -webkit-transition: background 0.2s ease-out; margin-top: 5px; font-size: 14px; } .search-button:active { background: #f6a000; position: relative; top: 3px; border: 1px solid #702d00; -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc; -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.6), inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 3px 0 #b8882a, 0 4px 0 #593a11, 0 8px 0 #ccc; } .sb-container{ height: 52px; background: #f2f2f2; padding: 0px 10px; border: 1px solid #D6D6D6; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 11px 0 #dfdede; -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 11px 0 #dfdede; box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), inset 0 2px 2px rgba(255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 #989898, 0 11px 0 #dfdede; } </style><div class='sb-container'> <form action='/search' autocomplete='off' id='searchbox' method='get'> <span><input class='search' id='search-input' name='q' placeholder='' type='text'/><input class="search-button" type="submit" value="Search"/></span> </form></div></div><br /><br />