<!DOCTYPE html> <html> <head> <title>CSS Buttons</title> </head> <body> <style type="text/css"> .btn-sm{background:#0099da; color:#FFF; padding:6px 10px; border-radius:3px; text-decoration:none; font-size:12px;} .btn-sm:hover{ background:#074e68;} .btn{background:#0099da; color:#FFF; padding:10px 15px; border-radius:3px; text-decoration:none; } .btn:hover{ background:#074e68;} .btn-lg{background:#0099da; color:#FFF; padding:13px 20px; border-radius:3px; text-decoration:none; font-size:26px; } .btn-lg:hover{ background:#074e68;} .btn-block{background:#0099da; color:#FFF; width:96%; display:block; padding:12px 15px; border-radius:3px; text-decoration:none; text-align:center; } .btn-block:hover{ background:#074e68;} </style> <h4><a href="https://www.freetimelearning.com/" target="_blank" class="btn-sm">Small Button</a></h4><br /> <h4><a href="https://www.freetimelearning.com/" target="_blank" class="btn">Default Button</a></h4><br /> <h4><a href="https://www.freetimelearning.com/" target="_blank" class="btn-lg">Large Button</a></h4><br /> <h4><a href="https://www.freetimelearning.com/" target="_blank" class="btn-block">Block Button</a></h4> </body> </html>
Output :
Topic :
Buttons
