HTML 5

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.   
  19. .button1 {  
  20.     background-color: white;  
  21.     color: black;  
  22.     border: 2px solid #4CAF50;  
  23. }  
  24.   
  25. .button1:hover {  
  26.     background-color: #4CAF50;  
  27.     color: white;  
  28. }  
  29.   
  30. .button2 {  
  31.     background-color: white;  
  32.     color: black;  
  33.     border: 2px solid #008CBA;  
  34. }  
  35.   
  36. .button2:hover {  
  37.     background-color: #008CBA;  
  38.     color: white;  
  39. }  
  40.   
  41. .button3 {  
  42.     background-color: white;  
  43.     color: black;  
  44.     border: 2px solid #f44336;  
  45. }  
  46.   
  47. .button3:hover {  
  48.     background-color: #f44336;  
  49.     color: white;  
  50. }  
  51.   
  52. .button4 {  
  53.     background-color: white;  
  54.     color: black;  
  55.     border: 2px solid #e7e7e7;  
  56. }  
  57.   
  58. .button4:hover {background-color: #e7e7e7;}  
  59.   
  60. .button5 {  
  61.     background-color: white;  
  62.     color: black;  
  63.     border: 2px solid #555555;  
  64. }  
  65.   
  66. .button5:hover {  
  67.     background-color: #555555;  
  68.     color: white;  
  69. }  
  70. </style>  
  71. </head>  
  72. <body>  
  73.   
  74. <button class="button button1">Green</button>  
  75. <button class="button button2">Blue</button>  
  76. <button class="button button3">Red</button>  
  77. <button class="button button4">Gray</button>  
  78. <button class="button button5">Black</button>  
  79.   
  80. </body>  
  81. </html>  
Step 6: Run The program, using Emulator.

Program
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs