Top 20+ beautiful CSS button collections

Creating visually appealing and interactive buttons is crucial for enhancing user experience on websites. Here’s a curated list of 20+ beautiful CSS button collections that you can integrate into your projects to make your web interfaces stand out.

1. Gradient Buttons Gradient buttons offer a smooth transition between colors, adding depth and

 visual interest.

  <button class="btn-gradient">Gradient Button</button> <style> .btn-gradient { background: linear-gradient(45deg, #6b8ff3, #1f8a70); border: none; color: white; padding: 10px 20px; border-radius: 25px; cursor: pointer; } </style>  

 2. Neumorphic Buttons Neumorphism combines skeuomorphism and flat design, giving buttons a soft, extruded plastic look.

  <button class="btn-neumorphic">Neumorphic Button</button> <style> .btn-neumorphic { background: #e0e0e0; border: none; color: #555; padding: 15px 30px; border-radius: 10px; box-shadow: 7px 7px 15px #aaa, -7px -7px 15px #fff; cursor: pointer; } </style>  

 3. Glassmorphism Buttons Glassmorphism offers a frosted-glass aesthetic with transparency and blurs.

  <button class="btn-glass">Glassmorphism Button</button> <style> .btn-glass { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(10px); color: white; padding: 10px 20px; border-radius: 10px; cursor: pointer; } </style>  

 4. Flat Buttons Flat buttons have a minimalist design without shadows or gradients.

  <button class="btn-flat">Flat Button</button> <style> .btn-flat { background: #3498db; border: none; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer; } </style>  

 5. Outlined Buttons Outlined buttons use borders to define their shape, often used for secondary actions.

  <button class="btn-outlined">Outlined Button</button> <style> .btn-outlined { background: transparent; border: 2px solid #3498db; color: #3498db; padding: 10px 20px; border-radius: 5px; cursor: pointer; } </style>  

 6. Icon Buttons Icon buttons include icons to provide additional context or functionality.

  <button class="btn-icon"><i class="fas fa-heart"></i> Like</button> <style> .btn-icon { background: #e74c3c; border: none; color: white; padding: 10px 20px; border-radius: 50px; cursor: pointer; } .btn-icon i { margin-right: 8px; } </style>  

 7. 3D Buttons 3D buttons add depth and realism with shadows and highlights.

  <button class="btn-3d">3D Button</button> <style> .btn-3d { background: #3498db; border: none; color: white; padding: 10px 20px; border-radius: 5px; box-shadow: 0 5px #2980b9; cursor: pointer; } .btn-3d:active { box-shadow: 0 2px #2980b9; transform: translateY(3px); } </style>  

 8. Hover Effect Buttons These buttons change appearance when hovered over, enhancing interactivity.

  <button class="btn-hover">Hover Me</button> <style> .btn-hover { background: #2ecc71; border: none; color: white; padding: 10px 20px; border-radius: 5px; transition: background 0.3s ease; cursor: pointer; } .btn-hover:hover { background: #27ae60; } </style>  

 9. Animated Buttons Animated buttons include subtle animations that make the button more engaging.

  <button class="btn-animated">Animated Button</button> <style> .btn-animated { background: #9b59b6; border: none; color: white; padding: 10px 20px; border-radius: 5px; position: relative; cursor: pointer; overflow: hidden; } .btn-animated:before { content: ''; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; background: rgba(255, 255, 255, 0.3); transition: all 0.4s; border-radius: 50%; z-index: 0; transform: translate(-50%, -50%) scale(0); } .btn-animated:hover:before { transform: translate(-50%, -50%) scale(1); } </style>  

 10. Toggle Buttons Toggle buttons switch between states, often used for on/off functionality.

  <button class="btn-toggle">Toggle Me</button> <style> .btn-toggle { background: #f39c12; border: none; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer; } .btn-toggle.active { background: #d35400; } </style> <script> document.querySelector('.btn-toggle').addEventListener('click', function() { this.classList.toggle('active'); }); </script>  

 11. Pill Buttons Pill buttons have fully rounded edges, giving a sleek look. <button class="btn-ghost">Ghost Button</button> <style> .btn-ghost { background: transparent; border: 2px solid #e74c3c; color: #e74c3c; padding: 10px 20px; border-radius: 5px; cursor: pointer; } </style> 

 12. Shadow Buttons Shadow buttons use shadows to create a floating effect. <button class="btn-shadow">Shadow Button</button> <style> .btn-shadow { background: #2c3e50; border: none; color: white; padding: 10px 20px; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); cursor: pointer; } .btn-shadow:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } </style> 

 13. Textured Buttons Textured buttons add a unique feel with background patterns or textures. <button class="btn-textured">Textured Button</button> <style> .btn-textured { background: url('texture.png'); border: none; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer; } </style> 

 14. Ghost Buttons Ghost buttons are transparent with a colored border, offering a minimalist look.

  <button class="btn-ghost">Ghost Button</button> <style> .btn-ghost { background: transparent; border: 2px solid #e74c3c; color: #e74c3c; padding: 10px 20px; border-radius: 5px; cursor: pointer; } </style> 

 15. Loading Buttons Loading buttons include an animated loading indicator for actions that take time.

  <button class="btn-ripple">Ripple Button</button> <style> .btn-ripple { background: #34495e; border: none; color: white; padding: 10px 20px; border-radius: 5px; position: relative; overflow: hidden; cursor: pointer; } .btn-ripple:after { content: ''; position: absolute; width: 100 px; height: 100px; background: rgba(255, 255, 255, 0.3); display: block; border-radius: 50%; transition: transform 0.6s, opacity 1s; transform: scale(0); opacity: 0; } .btn-ripple:active:after { transform: scale(4); opacity: 1; transition: transform 0s, opacity 0.6s; } </style><button class="btn-loading">Loading...</button> <style> .btn-loading { background: #16a085; border: none; color: white; padding: 10px 20px; border-radius: 5px; cursor: not-allowed; position: relative; } .btn-loading:after { content: ''; position: absolute; right: 15px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; border-top: 2px solid transparent; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> 

 16. Ripple Effect Buttons Ripple effect buttons have an expanding ripple on click, mimicking water drops. <button class="btn-circular"><i class="fas fa-play"></i></button> <style> .btn-circular { background: #1abc9c; border: none; color: white; padding: 15px; border-radius: 50%; cursor: pointer; } .btn-circular i { font-size: 16px; } </style> 

 17. Circular Buttons Circular buttons are perfect for icon-only buttons, providing a neat, compact look. <button class="btn-soft">Soft Button</button> <style> .btn-soft { background: #bdc3c7; border: none; color: #2c3e50; padding: 10px 20px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); cursor: pointer; } </style> 

 18. Soft Buttons Soft buttons have subtle, muted colors and soft shadows.  

 19. Split Buttons Split buttons combine a button with a dropdown for additional options. <div class="btn-split"> <button class="btn-main">Split Button</button> <button class="btn-dropdown"><i class="fas fa-caret-down"></i></button> </div> <style> .btn-split { display: inline-flex; align-items: center; } .btn-main { background: #2980b9; border: none; color: white; padding: 10px 20px; border-radius: 5px 0 0 5px; cursor: pointer; } .btn-dropdown { background: #2980b9; border: none; color: white; padding: 10px; border-radius: 0 5px 5px 0; cursor: pointer; } </style> 

 20. Heartbeat Buttons Heartbeat buttons subtly pulsate, drawing attention. <button class="btn-heartbeat">Heartbeat Button</button> <style> .btn-heartbeat { background: #e74c3c; border: none; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer; animation: heartbeat 1.5s infinite; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } </style> These button designs can be customized further to fit the specific needs of your project. Incorporate these styles to enhance user interactions and visual appeal on your website.