Top 10 Unique Download Button Codes for Your Website

Top 10 Unique Download Button Codes

Enhance your website with these beautifully designed, animated download buttons. Each button comes with HTML, CSS, and JavaScript code that you can copy with just one click!

Gradient Glow

<style>
.btn-gradient {
    background: linear-gradient(to right, #FF416C, #FF4B2B);
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.4);
}

.btn-gradient:hover {
    box-shadow: 0 6px 20px rgba(255, 75, 43, 0.6);
    transform: translateY(-2px);
}

.btn-gradient:active {
    transform: scale(0.98);
}
</style>

<button class="btn-gradient">
    <i class="fas fa-download"></i> Download
</button>

Border Transition

<style>
.btn-border {
    background: transparent;
    color: #3498db;
    padding: 15px 30px;
    border: 2px solid #3498db;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-border:hover {
    background: #3498db;
    color: white;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);
}
</style>

<button class="btn-border">
    <i class="fas fa-download"></i> Download
</button>

Shine Effect

<style>
.btn-shine {
    background: #2ecc71;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 30px;
    font-size: 1.1rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.4s;
}

.btn-shine:hover::before {
    left: 100%;
}
</style>

<button class="btn-shine">
    <i class="fas fa-download"></i> Download
</button>

Pulse Animation

<style>
.btn-pulse {
    background: #9b59b6;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transform: perspective(1px) translateZ(0);
}

.btn-pulse:hover {
    animation: pulse 1s;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
</style>

<button class="btn-pulse">
    <i class="fas fa-download"></i> Download
</button>

Folded Corner

<style>
.btn-folded {
    background: #e74c3c;
    color: white;
    padding: 15px 30px;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    position: relative;
}

.btn-folded::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 30px 30px;
    border-color: transparent transparent #c0392b transparent;
    bottom: 0;
    right: 0;
    transition: all 0.3s;
}

.btn-folded:hover::after {
    border-width: 0 0 40px 40px;
}
</style>

<button class="btn-folded">
    <i class="fas fa-download"></i> Download
</button>

3D Press Effect

<style>
.btn-3d {
    background: #34495e;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 5px 0 #2c3e50;
    transition: all 0.1s;
}

.btn-3d:active {
    box-shadow: 0 2px 0 #2c3e50;
    transform: translateY(3px);
}
</style>

<button class="btn-3d">
    <i class="fas fa-download"></i> Download
</button>

Icon Animation

<style>
.btn-icon {
    background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 30px;
    font-size: 1.1rem;
    cursor: pointer;
}

.btn-icon i {
    margin-left: 8px;
    transform: translateY(0);
    transition: all 0.3s;
}

.btn-icon:hover i {
    transform: translateY(3px);
}
</style>

<button class="btn-icon">
    Download <i class="fas fa-download"></i>
</button>

Text Expand

<style>
.btn-expand {
    background: #f1c40f;
    color: #2c3e50;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-expand:hover {
    letter-spacing: 2px;
}
</style>

<button class="btn-expand">
    <i class="fas fa-download"></i> Download
</button>

Clipping Path

<style>
.btn-clip {
    background: #1abc9c;
    color: white;
    padding: 15px 30px;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
    transition: all 0.3s;
}

.btn-clip:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 90% 100%, 0 100%, 0 0);
}
</style>

<button class="btn-clip">
    <i class="fas fa-download"></i> Download
</button>

Fill Effect

<style>
.btn-fill {
    background: #d35400;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.btn-fill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #e67e22;
    transition: all 0.3s;
    z-index: -1;
}

.btn-fill:hover::before {
    width: 100%;
}
</style>

<button class="btn-fill">
    <i class="fas fa-download"></i> Download
</button>

Code copied to clipboard!

© 2023 Top Download Buttons. All rights reserved.