Css3 hover input button with two color background and triangle - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button

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

Description

Css3 hover input button with two color background and triangle

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

body {<!--from   w w w  .  j ava2s.c  o  m-->
   background-color: blue;
}
label, button, textarea {
   border: 0 none;
   display: block;
}
button[type="submit"] {
   border: none;
   font-family: inherit;
   font-size: inherit;
   color: inherit;
   background: none;
   cursor: pointer;
   padding: 25px 80px;
   display: inline-block;
   margin: 25px auto 25px auto;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 700;
   outline: none;
   position: relative;
   -webkit-transition: all 0.3s;
   -moz-transition: all 0.3s;
   transition: all 0.3s;
   background-color: red;
}
button[type="submit"] {
   overflow: hidden;
}
button[type="submit"]:after {
   content: '';
   position: absolute;
   display: block;
   width: 100%;
   height: 0;
   top: 50%;
   left: 50%;
   background: #fff;
   opacity: 0;
   -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   -moz-transform: translateX(-20%) translateY(-20%) rotate(45deg);
   -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
button[type="submit"]:hover,
button[type="submit"]:active {
   color: #FFF;
}
button[type="submit"]:hover:after {
   height: 200%;
   opacity: 0.2;
   z-index: 300;
}
button[type="submit"]:active:after {
   height: 400%;
   opacity: 0.2;
}


      </style> 
 </head> 
 <body> 
  <button class="btn mod btn-default" type="submit" name="button" id="button">Enviar</button>  
 </body>
</html>

Related Tutorials