Create Angled button with hover effect - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button hover

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

Description

Create Angled button with hover effect

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta charset="utf-8"> 
  <title>Demo Set</title> 
  <style>

/* Demo Set */<!--from  www.j av a2  s  .  co  m-->
body{ background: #f06; background: linear-gradient(45deg, #f06, yellow); min-height: 100%; }
button{
   --heightmod: 0px;
   --my-height: 35px;
   --my-width: 70px;
   position:relative;
   background:none;   padding:0;
   display:inline-block;
   border-style: solid;
   border-color: transparent #000 transparent transparent ;
   border-width: 35px var(--my-width) 0 0;
   height: calc(var(--my-height) + var(--heightmod));
   width: 0;
   transition:300ms ease all;
   cursor:pointer;
   margin-top:10px;
}
button::after{   content: "1";
display: block;
position: absolute;
bottom: calc(var(--my-height) * 0.10);
left: calc(var(--my-width) * .70);
text-align:center;
color:#fff;
font-size:12pt;
}
button:hover{--heightmod:10px; margin-top:0px; border-right-color:#333}
.btn2{ --my-height: 70px; }
.btn2::after{ content: "2"; }
.btn3{ --my-height: 105px; } .btn3::after{ content: "3"; }
.btn4{ --my-height: 140px; } .btn4::after{ content: "4"; }

      </style> 
 </head> 
 <body> 
  <!-- content to be placed inside <body>?</body> --> 
  <div style="display:flex; justify-content:flex-start; align-items:flex-end;"> 
   <button onclick="console.log('1');"></button> 
   <button onclick="console.log('2');" class="btn2"></button> 
   <button onclick="console.log('3');" class="btn3"></button> 
   <button onclick="console.log('4');" class="btn4"></button> 
  </div>  
 </body>
</html>

Related Tutorials