Gradient Buttons

<style> .gradient-button { background: linear-gradient(45deg, #ff6b6b, #f06595); color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background 0.3s ease; } .gradient-button:hover { background: linear-gradient(45deg, #f06595, #ff6b6b); } </style> <div class="gradient-button">Click Me</div>

Animated Buttons

<style> .animated-button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: transform 0.2s ease, background-color 0.3s ease; } .animated-button:hover { transform: scale(1.1); background-color: #45a049; } </style> <div class="animated-button">Hover Me</div>

3D Buttons

<style> .three-d-button { background-color: #008CBA; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; box-shadow: 0 4px #999; transition: box-shadow 0.3s ease, transform 0.2s ease; } .three-d-button:hover { box-shadow: 0 8px #666; transform: translateY(-2px); } </style> <div class="gradient-button">Click Me</div>

Icon Buttons

<style> .icon-button { background-color: #f0f0f0; color: #333; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; display: flex; align-items: center; } .icon-button i { margin-right: 8px; /* Space between icon and text */ } .icon-button:hover { background-color: #e0e0e0; } </style> <div class="icon-button"> <i class="fas fa-check"></i> Submit </div>

Borderless Buttons

<style> .borderless-button { background-color: transparent; color: #007BFF; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: color 0.3s ease; } .borderless-button:hover { color: #0056b3; } </style> <div class="borderless-button">Click Me</div>

Hover Effects

<style> .hover-effect-button { background-color: #ff9800; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: transform 0.2s ease, background-color 0.3s ease; } .hover-effect-button:hover { transform: translateY(-5px); background-color: #fb8c00; } </style> <div class="hover-effect-button">Hover Me</div>

Gradient Hover Effects

<style> .gradient-hover-button { background: linear-gradient(45deg, #ff6b6b, #f06595); color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background 0.3s ease; } .gradient-hover-button:hover { background: linear-gradient(45deg, #f06595, #ff6b6b); } </style> <div class="gradient-hover-button">Hover Me</div>

Button Transitions

<style> .transition-button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease, transform 0.2s ease; } .transition-button:hover { background-color: #45a049; transform: scale(1.05); } </style> <div class="transition-button">Click Me</div>

Button Shadows

<style> .shadow-button { background-color: #008CBA; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; box-shadow: 0 4px #999; transition: box-shadow 0.3s ease, transform 0.2s ease; } .shadow-button:hover { box-shadow: 0 8px #666; transform: translateY(-2px); } </style> <div class="shadow-button">Click Me</div>

Custom Shapes

<style> .custom-shape-button { background-color: #f06595; color: white; padding: 10px 20px; border: none; border-radius: 50%; /* Makes the button circular */ cursor: pointer; font-size: 16px; width: 60px; /* Fixed width for circular shape */ height: 60px; /* Fixed height for circular shape */ display: flex; align-items: center; justify-content: center; } .custom-shape-button:hover { background-color: #ff6b6b; } </style> <div class="custom-shape-button">Go</div>