How To Create A CSS Button In HTML
Step 1: Open Visual Studio 2015 and create a new Website.
Step 2: Choose ASP.NET Empty Web Site and change the file name. Click OK.
Step 3: Right click on the project file and go to Add New Item.
Step 4: Choose HTML Page and change the name. Click OK.
Step 5: The source code is given below:
- <html>
- <head>
- <style>
- .button {
- background-color: #4CAF50; /* Green */
- border: none;
- color: white;
- padding: 16px 32px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 16px;
- margin: 4px 2px;
- -webkit-transition-duration: 0.4s; /* Safari */
- transition-duration: 0.4s;
- cursor: pointer;
- }
- .button1 {
- background-color: white;
- color: black;
- border: 2px solid #4CAF50;
- }
- .button1:hover {
- background-color: #4CAF50;
- color: white;
- }
- .button2 {
- background-color: white;
- color: black;
- border: 2px solid #008CBA;
- }
- .button2:hover {
- background-color: #008CBA;
- color: white;
- }
- .button3 {
- background-color: white;
- color: black;
- border: 2px solid #f44336;
- }
- .button3:hover {
- background-color: #f44336;
- color: white;
- }
- .button4 {
- background-color: white;
- color: black;
- border: 2px solid #e7e7e7;
- }
- .button4:hover {background-color: #e7e7e7;}
-
- .button5 {
- background-color: white;
- color: black;
- border: 2px solid #555555;
- }
- .button5:hover {
- background-color: #555555;
- color: white;
- }
- </style>
- </head>
- <body>
- <button class="button button1">Green</button>
- <button class="button button2">Blue</button>
- <button class="button button3">Red</button>
- <button class="button button4">Gray</button>
- <button class="button button5">Black</button>
- </body>
- </html>
Step 6: Run The program, using Emulator.