Download Button

<!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>