CSS Buttons

Link Button
press effect
Animated Button
buttons_disabled
fade in hover
Exported from Notepad++
<html><head><style> .button { background-color: #04AA6D; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 20px; } .button1 { background-color: white; color: black; border: 2px solid #f44336; } .button2 { background-color: white; color: black; border: 2px solid #04AA6D; } .button2:hover { background-color: #04AA6D; color: white; } </style> </head> <body> <h2>CSS Buttons</h2> <button>Default Button</button> <a href="#" class="button">Link Button</a> <button class="button">Button</button> <input type="button" class="button" value="Input Button"> <button class="button1">Button</button> <button class="button2">Button</button> </br> <a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_animate3" class="button">press effect</a></br> <a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_animate1" class="button">Animated Button</a></br> <a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_disabled" class="button">buttons_disabled</a></br> <a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_fade" class="button">fade in hover</a></br> </body> </html>