Post
Ask Question

How To Create A CSS Button In HTML

How To Create A CSS Button In HTML 

 
Step 1: Open Visual Studio 2015 and create a new Website.
 
new  
 
Step 2: Choose ASP.NET Empty Web Site and change the file name. Click OK. 
 
ASP.NET Empty Web Site
 
Step 3: Right click on the project file and go to Add New Item.
 
Add  
 
Step 4: Choose HTML Page and change the name. Click OK. 
 
HTML Page
 
Step 5: The source code is given below:
  1. <html>  
  2.     <head>  
  3.         <style>    
  4. .button {    
  5.     background-color: #4CAF50; /* Green */    
  6.     border: none;    
  7.     color: white;    
  8.     padding: 16px 32px;    
  9.     text-align: center;    
  10.     text-decoration: none;    
  11.     display: inline-block;    
  12.     font-size: 16px;    
  13.     margin: 4px 2px;    
  14.     -webkit-transition-duration: 0.4s; /* Safari */    
  15.     transition-duration: 0.4s;    
  16.     cursor: pointer;    
  17. }    
  18. .button1 {    
  19.     background-color: white;    
  20.     color: black;    
  21.     border: 2px solid #4CAF50;    
  22. }      
  23. .button1:hover {    
  24.     background-color: #4CAF50;    
  25.     color: white;    
  26. }     
  27. .button2 {    
  28.     background-color: white;    
  29.     color: black;    
  30.     border: 2px solid #008CBA;    
  31. }     
  32. .button2:hover {    
  33.     background-color: #008CBA;    
  34.     color: white;    
  35. }      
  36. .button3 {    
  37.     background-color: white;    
  38.     color: black;    
  39.     border: 2px solid #f44336;    
  40. }     
  41. .button3:hover {    
  42.     background-color: #f44336;    
  43.     color: white;    
  44. }    
  45. .button4 {    
  46.     background-color: white;    
  47.     color: black;    
  48.     border: 2px solid #e7e7e7;    
  49. }     
  50. .button4:hover {background-color: #e7e7e7;}    
  51.     
  52. .button5 {    
  53.     background-color: white;    
  54.     color: black;    
  55.     border: 2px solid #555555;    
  56. }      
  57. .button5:hover {    
  58.     background-color: #555555;    
  59.     color: white;    
  60. }    
  61. </style>  
  62.     </head>  
  63.     <body>  
  64.         <button class="button button1">Green</button>  
  65.         <button class="button button2">Blue</button>  
  66.         <button class="button button3">Red</button>  
  67.         <button class="button button4">Gray</button>  
  68.         <button class="button button5">Black</button>  
  69.     </body>  
  70. </html>    
Step 6: Run The program, using Emulator.
 
Program