change search button text color - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button text

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button text

Description

change search button text color

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#tsheader {<!--from   www  .j a va2s  . c  o m-->
   background-color: transparent;
}
#tsnewsearch {
   float:right;
   height: 30px;
}
.tstextinput {
   margin: 0 auto;
   height: 22px;
   padding: 0px 25px;
   border:1px solid #bf2f2a;
   border-right:0px;
   border-top-left-radius: 5px 5px;
   border-bottom-left-radius: 5px 5px;
}
.tsbutton {
   margin: 10px 0;
   padding: 0px 10px !important;
   height: 22px;
   cursor: pointer;
   text-align: center;
   vertical-align: middle;
   text-decoration: none;
   border: solid 1px #bf2f2a;
   border-right: 0px;
   background: #bf2f2a;
   background: -webkit-gradient(linear, left top, left bottom, from(#bf2f2a), to(#862724));
   background: -moz-linear-gradient(top, #bf2f2a, #862724);
   border-top-right-radius: 5px 5px;
   border-bottom-right-radius: 5px 5px;
   color: #fff;
}
.tsbutton input, button {
   font-size: 13px;
   font-weight: 700px;
   color: #000 !important;
}
.tsbutton:hover {
   background: #bf2f2a;
   background: -webkit-gradient(linear, left top, left bottom, from(#E03630), to(#bf2f2a));
   background: -moz-linear-gradient(top, #E03630, #bf2f2a);
}
/* Fixes submit button height problem in Firefox */
.tsbutton::-moz-focus-inner {
   border: 0;
}
.tsclear {
   clear:both;
}


      </style> 
 </head> 
 <body> 
  <div id="tsheader"> 
   <form id="tsnewsearch" method="get" action=""> 
    <i class="fa fa-search" style="position: absolute; left: 5px; top:8px; overflow: visibile;"></i> 
    <input type="text" class="tstextinput" placeholder=". . ." name="s" maxlength="120"> 
    <input type="submit" value="Search" class="tsbutton"> 
   </form> 
   <div class="tsclear"></div> 
  </div>  
 </body>
</html>

Related Tutorials