রেইনবো ডিলাইট সার্চ বক্স, আমারই ডিজাইন করা

আরেকটি অশাধারন সার্চবক্স। সম্পূর্ণই ইউনিক। আমাদের বানানো। আল্টিমা গ্রিনের মডিফাই করা ভার্সন।

ডেমো ফটো

সোর্স কোড,

<style>
/*designed by bloggertawsiftorabi.blogspot.com and grplusbd.cf */
#shrnbox {
    background: linear-gradient(#7aeb0c, red, #529d09,yellow, blue, white, brown, #ff3300,#FFCC99,red,lime);
    border-radius: 25px;
border-shadow: 4px 2px 2px 9px #000000;
    padding: 20px 10px;
    width: 40%;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#shrnbox input {
    outline: none;
}

#shrnbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf7l1vKbYzD5YWMhgQ2mRNz4KrrOSzJJsnEHfQr7q_CNOFzhsaEagwMxonB_eyh5dNf4ZORbcXOgZzfK1QKr235j8gTEZ-EnWQH4-H7ajHacdCOQ1pS8mcJyGQOLRdbof_daHP9TuhHGd1/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    font: bold 12px siyam rupali;
    color: black;
    width: 90%;
    padding: 8px 15px 8px 30px;
}

#btoon-submit {
    display: block;
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
padding: 10px 15px;
margin: 20px auto;
color: #000000;
background-color: lime;
background: -webkit-linear-gradient(#888, #555);
background: linear-gradient(#7aeb0c, red, #529d09,yellow, blue, white, brown, #ff3300,#FFCC99,red,lime);
border: 0 none;
border-radius: 3px;
text-shadow: 0 -1px 0 #000;
box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
cursor: pointer;
font-family: siyam rupali;`
}

#btoon-submit:hover {
    background: lime;

}

#btoon-submit:active {
    background: lime
;
    outline: none;
}

#btoon-submit::-moz-focus-inner {
    border: 0;
}
</style>
<br /><br /><br />
<form action="/search" id="shrnbox" method="get">

<center><input name="q" placeholder="টাইপ করুন" size="15" type="text" /></center>
<input id="btoon-submit" type="submit" value="ক্লিক করুন" />
</form>

Related Posts