Adding hover effect to input button with css border, margin, padding and width - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:input button

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. input button

Description

Adding hover effect to input button with css border, margin, padding and width

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">
input {<!--from www.  j av  a  2 s  . co  m-->
   -moz-box-sizing:content-box;
   -webkit-box-sizing:content-box;
   box-sizing:content-box;
   border-color:Chartreuse;
   border-style:solid;
   border-width:2px 3px 3px 2px;
   margin:5px 0px 4px 2px;
   padding:5px 5px 5px 5px;
   width:71px;
   height:41px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   -khtml-border-radius:5px;
   border-radius:5px;
}

input:hover {
   font-weight:bold;
}

input:active {
   margin:5px 2px 5px 2px;
   padding:5px 5px 5px 5px;
   border-width:2px 2px 2px 2px;
}
</style> 
 </head> 
 <body> 
  <input type="button" value="test"> 
  <input type="button" value="test"> 
  <br> 
  <input type="button" value="test"> 
  <input type="button" value="test">  
 </body>
</html>

Related Tutorials