HTML Tutorial

Examples

HTML Practice & Useful Resources

Bootstrap

Beautiful CSS Buttons Examples

By IncludeHelp Last updated : October 27, 2024

If you are looking for beautiful and ready-to-use CSS buttons to improve the design of your website, Here you can find the collection of 20+ CSS button examples. Each button has its own CSS and HTML codes. You can easily copy and use in your design. These button designs will surely make your website look amazing. Whether you're a beginner or an experienced web developer, these button styles are easy to customize and fit perfectly into any project.

1. Gradient Button

CSS Code

.btn-gradient {
    background: linear-gradient(45deg, #ff7a18, #af002d 70%);
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}
.btn-gradient:hover {
    background: linear-gradient(45deg, #ff7a18, #c70e48 70%);
}

HTML Code

<button class="btn-gradient">Gradient Button</button>

2. Outline Button

CSS Code

.btn-outline {
    background: transparent;
    color: #333;
    padding: 1rem 2rem;
    border: 2px solid #333;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s ease;
}
.btn-outline:hover {
    background: #333;
    color: #fff;
}

HTML Code

<button class="btn-outline">Outline Button</button>

3. Raised Shadow Button

CSS Code

.btn-raised {
    background-color: #4CAF50;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
}
.btn-raised:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

HTML Code

<button class="btn-raised">Raised Shadow Button</button>

4. Neon Glow Button

CSS Code

.btn-neon {
    background-color: #000;
    color: #39ff14;
    padding: 1rem 2rem;
    border: 2px solid #39ff14;
    border-radius: 5px;
    cursor: pointer;
    text-shadow: 0 0 5px #39ff14, 0 0 10px #39ff14;
    transition: background-color 0.3s, color 0.3s ease;
}
.btn-neon:hover {
    background-color: #39ff14;
    color: #000;
}

HTML Code

<button class="btn-neon">Neon Glow Button</button>

5. Ripple Effect Button

CSS Code

.btn-ripple {
    position: relative;
    overflow: hidden;
    background-color: #2196F3;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.btn-ripple:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s ease;
}
.btn-ripple:hover:after {
    transform: translate(-50%, -50%) scale(1);
}

HTML Code

<button class="btn-ripple">Ripple Effect Button</button>

6. 3D Button

CSS Code

.btn-3d {
    background-color: #FF5733;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px #C70039;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-3d:active {
    transform: translateY(4px);
    box-shadow: 0 2px #C70039;
}

HTML Code

<button class="btn-3d">3D Button</button>

7. Animated Border Button

CSS Code

.btn-border-animated {
    background-color: transparent;
    color: #FF5722;
    padding: 1rem 2rem;
    border: 2px solid transparent;
    border-image: linear-gradient(45deg, #FF5722, #FFC107);
    border-image-slice: 1;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.3s ease;
}
.btn-border-animated:hover {
    color: #FFC107;
}

HTML Code

<button class="btn-border-animated">Animated Border Button</button>

8. Icon Button

CSS Code

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #006969;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.btn-icon:hover {
    background-color: #005757;
    transform: scale(1.05);
}

.btn-icon .icon {
    margin-right: 8px;
}

.icon {
    font-size: 20px;
}

HTML Code

<button class="btn-icon">
    <i class="icon fas fa-thumbs-up"></i>
    Like
</button>

9. Skewed Button

CSS Code

.btn-skewed {
    background-color: #673AB7;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transform: skew(-10deg);
    transition: background-color 0.3s ease;
}

.btn-skewed:hover {
    background-color: #512DA8;
}

HTML Code

<button class="btn-skewed">Skewed Button</button>

10. Pulse Button

CSS Code

.btn-pulse {
    background-color: #E91E63;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-pulse:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(233, 30, 99, 0.4);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

HTML Code

<button class="btn-pulse">Pulse Button</button>

11. Glow Button

CSS Code

.btn-glow {
    background-color: #3498db;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 10px #3498db, 0 0 20px #3498db;
    transition: box-shadow 0.3s ease;
}

.btn-glow:hover {
    box-shadow: 0 0 15px #3498db, 0 0 30px #3498db;
}

HTML Code

<button class="btn-glow">Glow Button</button>

12. Shadow Pop Button

CSS Code

.btn-shadow-pop {
    background-color: #2ecc71;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.btn-shadow-pop:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

HTML Code

<button class="btn-shadow-pop">Shadow Pop Button</button>

13. Text Reveal Button

CSS Code

.btn-text-reveal {
    background-color: #8e44ad;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.btn-text-reveal:before {
    content: "Hovered!";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8e44ad;
    background: #fff;
    transition: left 0.3s ease;
}

.btn-text-reveal:hover:before {
    left: 0;
}

HTML Code

<button class="btn-text-reveal">Text Reveal</button>

14. Wave Button

CSS Code

.btn-wave {
    background-color: #f39c12;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.btn-wave::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: wave 1s infinite;
    opacity: 0.6;
}
@keyframes wave {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        transform: translate(-50%, -50%) scale(0);
    }
}

HTML Code

<button class="btn-wave">Wave Button</button>

15. Slide Button

CSS Code

.btn-slide {
    background-color: #e74c3c;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.btn-slide:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: left 0.3s ease;
}
.btn-slide:hover:before {
    left: 0;
}

HTML Code

<button class="btn-slide">Slide Button</button>

16. Flip Button

CSS Code

.btn-flip {
    background-color: #2ecc71;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    perspective: 1000px;
}
.btn-flip:active {
    transform: rotateY(180deg);
    transition: transform 0.5s ease;
}

HTML Code

<button class="btn-flip">Flip Button</button>

17. Tornado Button

CSS Code

.btn-tornado {
    background-color: #e67e22;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    animation: tornado 1s infinite;
}
@keyframes tornado {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(0);
    }
}

HTML Code

<button class="btn-tornado">Tornado Button</button>

18. Confetti Button

CSS Code

.btn-confetti {
    background-color: #1abc9c;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.btn-confetti::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.4s ease;
}
.btn-confetti:hover::after {
    transform: translate(-50%, -50%) scale(1);
}

HTML Code

<button class="btn-confetti">Confetti Button</button>

19. Ice Button

CSS Code

.btn-ice {
    background-color: #00bcd4;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.btn-ice::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-100%);
    transition: transform 0.5s ease;
}
.btn-ice:hover::before {
    transform: translateY(0);
}

HTML Code

<button class="btn-ice">Ice Button</button>

20. Neon Button

CSS Code

.btn-neon {
    background-color: #e74c3c;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 5px #e74c3c, 0 0 10px #e74c3c;
    transition: box-shadow 0.3s ease;
}
.btn-neon:hover {
    box-shadow: 0 0 20px #e74c3c, 0 0 30px #e74c3c;
}

HTML Code

<button class="btn-neon">Neon Button</button>

21. Heartbeat Button

CSS Code

.btn-heartbeat {
    background-color: #e67e22;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    animation: heartbeat 1.5s infinite;
}
@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

HTML Code

<button class="btn-heartbeat">Heartbeat Button</button>

22. Retro Button

CSS Code

.btn-retro {
    background-color: #9b59b6;
    color: #fff;
    padding: 1rem 2rem;
    border: 2px solid #8e44ad;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-retro:hover {
    background-color: #8e44ad;
    color: #f1c40f;
}

HTML Code

<button class="btn-retro">Retro Button</button>

23. Puzzle Button

CSS Code

.btn-puzzle {
    background-color: #f39c12;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.btn-puzzle::after {
    content: "Solved!";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: #fff;
    transition: transform 0.4s ease;
}
.btn-puzzle:hover::after {
    transform: translate(-50%, -50%) scale(1);
}

HTML Code

<button class="btn-puzzle">Puzzle Button</button>

24. Vintage Button

CSS Code

.btn-vintage {
    background-color: #d35400;
    color: #fff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}
.btn-vintage:hover {
    background-color: #c0392b;
    transform: translateY(-2px);
}

HTML Code

<button class="btn-vintage">Vintage Button</button>

CSS Color Gradients

CSS Checkboxes Examples

Comments and Discussions!

Load comments ↻