How To Create Download Buttons using CSS ?

Last Updated : 18 Mar, 2024

In CSS, we can create and style the download buttons to enhance the overall web interface of the application. Various styling properties like padding, hover, and animation can be added to the buttons.

Below are the different approaches for creating a download button in CSS:

Table of Content

Download Button with Transition
Download Button with Keyframe Animation

Download Button with Transition

In this approach, we have created an attractive download button using CSS transitions. When hovered on the button, the button smoothly transitions its background color, and a download animation is applied using a pseudo-element.

Example: The below example creates a download button using the CSS Transitions.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Example 1</title>
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

        .download-btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #a5fb73;
            color: rgb(0, 0, 0);
            border: none;
            border-radius: 5px;
            font-size: 16px;
            text-decoration: none;
            transition:
                background-color 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .download-btn:hover {
            background-color: #0056b3;
        }

        .download-icon {
            margin-right: 5px;
        }

        .download-btn::after {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            width: 100%;
            height: 100%;
            background-color:
                rgba(255, 255, 255, 0.3);
            transform:
                translateX(-50%) scaleX(0);
            transition:
                transform 0.5s ease-in-out;
            z-index: 1;
        }

        .download-btn:hover::after {
            transform:
                translateX(-50%) scaleX(1);
        }
    </style>
</head>

<body>
    <h3>
        Download Button with Transition
    </h3>
    <a href="#" class="download-btn">
        <i class="fas fa-download download-icon"></i>
        Download
    </a>
</body>

</html>

Output:

fosiGIF

Download Button with Keyframe Animation

In this approach, we are creating an attractive download button with keyframe animations to simulate a pulsating effect and a progress bar animation.

Example: The below example creates a download button using the CSS Keyframe Animation.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Example 2</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes progress {
            0% {
                width: 0;
            }

            100% {
                width: 100%;
            }
        }

        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

        .download-btn {
            position: relative;
            display: inline-block;
            padding: 12px 24px;
            background:
                linear-gradient(to right, #4CAF50, #f4aefa);
            color: rgb(0, 0, 0);
            border: none;
            border-radius: 5px;
            font-size: 16px;
            text-decoration: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: background 0.3s ease;
            overflow: hidden;
            animation:
                pulse 2s infinite alternate;
        }

        .download-btn:hover {
            background:
                linear-gradient(to right, #7a68e2, #4CAF50);
        }

        .download-icon {
            margin-right: 5px;
        }

        .progress-bar {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background-color:
                rgba(255, 238, 139, 0.5);
            animation: progress 3s linear forwards;
        }
    </style>
</head>

<body>
    <h3>
        Download Button with
        Keyframe Animation
    </h3>
    <a href="#" class="download-btn">
        <i class="fas fa-download download-icon"></i>
        Download
        <div class="progress-bar"></div>
    </a>
</body>

</html>