CSS Basic Button Styles
Discover a variety of basic button styles in CSS that you can use to improve the design of your website or web application. Simply click on any button style below to copy the code.
button{background-color:#4CAF50;border:none;color:white;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px}
button{background-color:#4CAF50;border:none;border-radius:5px;color:white;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px}
button{background:linear-gradient(to right,#FF416C,#FF4B2B);border:none;color:white;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px}
button{background-color:#4CAF50;border:none;color:white;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;transition:background-color .3s}button:hover{background-color:#45a049}
button{background-color:#4CAF50;border:none;color:white;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;box-shadow:0 4px 8px rgba(0,0,0,.1)}