Gradient and Image on Form Submit button - HTML CSS CSS Form

HTML CSS examples for CSS Form:input submit

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input submit

Description

Gradient and Image on Form Submit button

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

form { margin: 50px; }
button {<!-- w ww  . j a v a 2s .  co m-->
   margin: 0;
   padding: 0;
   border: none;
   font: inherit;
   color: inherit;
   background: none;
   /* IE7 fix */
   overflow: visible;
}
button::-moz-focus-inner {
   padding: 0;
   border: none;
}
button:-moz-focusring {
   outline: 1px dotted black;
}
button {
   padding: 1px 6px 4px 6px;
   border: 1px solid #888;
   border-radius: 4px;
}
.whitegrad { 
background: blue; /* Old browsers */
background: -moz-linear-gradient(top, blue 0%, #e3e3e3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,blue), color-stop(100%,#e3e3e3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, blue 0%,#e3e3e3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, blue 0%,#e3e3e3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, blue 0%,#e3e3e3 100%); /* IE10+ */
background: linear-gradient(top, blue 0%,#e3e3e3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='blue', endColorstr='#e3e3e3',GradientType=0 ); /* IE6-9 */
}
button span {
   background: url(http://dummyimage.com/16x1:1) left center no-repeat;
   padding-left: 22px;
}


      </style> 
 </head> 
 <body> 
  <form action="" method="post" class="addtofavorites"> 
   <input type="hidden" class="atf_video_id" name="atf_video_id" value=""> 
   <button class="whitebtn whitegrad rndrgt" type="submit"> <span>Add to Favorites</span> </button> 
  </form>  
 </body>
</html>

Related Tutorials