Download Button Template

This is a clear and intuitive button for offering file downloads on your website.

By pairing an action-oriented label with a familiar download icon, this template makes it obvious to users what will happen when they click.

Get Source Code Preview

About the Download Button

A good download button removes any ambiguity for the user. This template achieves this by combining explicit text with a universally recognized download icon. The icon provides a quick visual cue, while the text confirms the action. This component is ideal for any situation where a user needs to download a file, such as a PDF report, a ZIP archive, or an application.

Features

Iconography Included: Features a clean, inline SVG download icon that requires no external image files or font libraries.
Perfect Alignment: Uses Flexbox to ensure the icon and text are always vertically centered, regardless of font size.
Self-Contained & Easy to Use: Simply copy and paste the code block. The embedded SVG means there are no dependencies to manage.
Accessible: The included SVG uses aria-hidden="true" because its purpose is purely decorative; the button's text already describes the action, preventing redundancy for screen reader users.

Code Breakdown

The core of this component is a button element containing an svg element and a span for the text. To align them perfectly, the button is styled with display: inline-flex and align-items. The gap property is used to create consistent spacing between the icon and the text.

The SVG icon's color is set to currentColor, a special value that makes the icon inherit the color of its parent element. This means you only need to define the button's text color, and the icon will automatically match it.

Code

Here is the complete code for the download button with an embedded icon.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Download Button</title>
    <style>
        /*
         Component: Download Button with Icon
         Description: A button featuring text and an embedded SVG download icon.
        */

:root {
            --download-bg: #28a745;
            --download-text: #ffffff;
            --download-bg-hover: #218838;
            --download-focus-outline: #28a745;
        }

.download-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            background-color: #f0f0f0; /* Example background */
        }

.download-btn-1 {
            display: inline-flex; /* Use flexbox for alignment */
            align-items: center;  /* Vertically center icon and text */
            gap: 0.75rem; /* Space between icon and text */
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--download-text);
            background-color: var(--download-bg);
            border: none;
            border-radius: 8px;
            padding: 0.9rem 1.8rem;
            cursor: pointer;
            text-decoration: none;
            line-height: 1.5;
            transition: background-color 0.2s ease-in-out;
        }

.download-btn-1 .icon {
            width: 1.2em;
            height: 1.2em;
            fill: currentColor; /* Icon color inherits from button's text color */
        }
        
        .download-btn-1:hover {
            background-color: var(--download-bg-hover);
        }

.download-btn-1:active {
            transform: translateY(1px);
        }
        
        .download-btn-1:focus-visible {
            outline: 3px solid var(--download-focus-outline);
            outline-offset: 3px;
        }

/* For smaller screens */
        @media (max-width: 600px) {
            .download-btn-1 {
                width: 100%;
                justify-content: center; /* Center content when full-width */
            }
        }
    </style>
</head>
<body>

<div class="download-container-1">
        <button type="button" class="download-btn-1">
            
            <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"/></svg>
            <span>Download Itinerary</span>
        </button>
    </div>

</body>
</html>

View Output