Style button on hover to have different color, background color and cursor - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Button

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Button

Description

Style button on hover to have different color, background color and cursor

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

.create_button{<!--from  w  ww.  j ava2s  .c  o  m-->
   margin-right: 20px;
   padding: 5px;
   border: 4px solid rgb(25, 25, 25);
   transition: all 0.2s ease-in-out 0s;
   background-color: rgb(140, 140, 140);
   color: black;
}
.create_button:hover{
   color: rgb(255, 125, 0);
   background-color: rgb(25, 25, 25);
   cursor: pointer;
}


      </style> 
 </head> 
 <body> 
  <button class="create_button" name="button_create" type="submit">Tutorial erstellen</button>  
 </body>
</html>

Related Tutorials