DocsAllOver Advanced App download button concept with CSS3 Snippets

Advanced App download button concept with CSS3

Oct. 23, 2024

HTML, CSS, Js, Responsive, Clean UI, Animation

Full Screen

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <title>App download button</title>
</head>

<body>
    <a class="download" href="#platforms"></a>
    <div class="platforms" id="platforms">
        <a href="#windows" data-os="windows"></a>
        <a href="#mac" data-os="mac"></a>
        <a href="#linux" data-os="linux"></a>
    </div>
    <div class="installer" id="windows">
        <div class="info" data-weight="753 KB"></div>
        <div class="details">
            <p>Windows installer</p>
            <span>Version 1.0.6</span>
            <ul>
                <li>List item number one</li>
                <li>List item number two</li>
                <li>List item number three</li>
                <li>List item number four</li>
            </ul>
        </div>
        <label for="progressWindows"><input type="radio" id="progressWindows" /><span></span></label>
        <a class="close" href="#"></a>
    </div>
    <div class="installer" id="mac">
        <div class="info" data-weight="634 KB"></div>
        <div class="details">
            <p>Mac installer</p>
            <span>Version 1.0.6</span>
            <ul>
                <li>List item number one</li>
                <li>List item number two</li>
                <li>List item number three</li>
                <li>List item number four</li>
            </ul>
        </div>
        <label for="progressMac"><input type="radio" id="progressMac" /><span></span></label>
        <a class="close" href="#"></a>
    </div>
    <div class="installer" id="linux">
        <div class="info" data-weight="781 KB"></div>
        <div class="details">
            <p>Linux installer</p>
            <span>Version 1.0.6</span>
            <ul>
                <li>List item number one</li>
                <li>List item number two</li>
                <li>List item number three</li>
                <li>List item number four</li>
            </ul>
        </div>
        <label for="progressLinux"><input type="radio" id="progressLinux" /><span></span></label>
        <a class="close" href="#"></a>
    </div>
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
</body>

</html>

@import url(https://fonts.googleapis.com/css?family=Varela+Round);

body {
    margin: 0;
    padding: 0;
    background: #eee;
    font-family: "Varela Round", "Ionicons";
}

::selection {
    background: #3F8EFC;
    color: #fff;
}

a {
    text-decoration: none;
}

.download {
    position: absolute;
    top: calc(50% - 30px);
    right: calc(50% - 115px);
    width: 230px;
    height: 60px;
    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.075), rgba(255, 255, 255, 0.045));
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.075), rgba(255, 255, 255, 0.045));
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 1px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 60px;
    text-align: center;
    letter-spacing: 5px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.67, 0.13, 0.1, 0.81), transform 0.15s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}

.download:hover {
    right: calc(50% - 200px);
    width: 400px;
}

.download:active {
    transform: translateY(3px);
}

.download:before,
.download:after {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}

.download:before {
    content: "DOWNLOAD";
}

.download:after {
    content: "Click to select a platform";
    top: -60px;
    opacity: 0;
}

.download:hover:after {
    top: 0px;
    opacity: 1;
}

.download:hover:before {
    top: 60px;
    opacity: 0;
}

.platforms {
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 290px);
    height: 200px;
    width: 580px;
    background: #fff;
    border-radius: 20px;
    visibility: hidden;
    transform: scale(0.9);
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}

.platforms:target {
    visibility: visible;
    transform: scale(1);
    opacity: 1;
}

.platforms a {
    position: absolute;
    top: 200px;
    left: 10px;
    width: 180px;
    height: 180px;
    border-radius: 10px;
    color: #3F8EFC;
    text-transform: uppercase;
    transition: top 0.5s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}

.platforms a:nth-child(1) {
    transition-delay: 0.1s;
}

.platforms a:nth-child(2) {
    left: 200px;
}

.platforms a:nth-child(3) {
    left: 390px;
    transition-delay: 0.1s;
}

.platforms:target a {
    top: 10px;
}

.platforms a:hover {
    background: #E5F4FF;
    box-shadow: 0 0 0 1px #A5CFFF;
}

.platforms a:before {
    content: attr(data-os);
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

.platforms a:after {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 120px;
    line-height: 140px;
    text-align: center;
    font-size: 300%;
    transform: scale(1.25);
    transform-origin: center center;
}

.platforms a:nth-child(1):after {
    content: "?";
}

.platforms a:nth-child(2):after {
    content: "?";
}

.platforms a:nth-child(3):after {
    content: "?";
}

.installer {
    position: fixed;
    top: calc(50% - 150px);
    left: calc(50% - 300px);
    width: 600px;
    height: 300px;
    background: #fff;
    border-radius: 20px;
    visibility: hidden;
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}

.installer:target {
    visibility: visible;
    transform: scale(1);
    opacity: 1;
}

.installer a.back {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-size: 200%;
    color: #bbb;
}

.installer a.back:before {
    content: "?";
}

.installer a.back:after {
    content: "Back";
    position: absolute;
    top: 7px;
    left: 30px;
    height: 20;
    line-height: 20px;
    font-size: 40%;
    text-align: center;
    color: #cacaca;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}

.installer a.back:hover:after {
    left: 38px;
    opacity: 1;
}

.installer a.close {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 200%;
    color: #bbb;
}

.installer a.close:before {
    content: "?";
}

.installer a.close:after {
    content: "Close";
    position: absolute;
    top: 7px;
    right: 30px;
    height: 20px;
    line-height: 20px;
    font-size: 40%;
    text-align: center;
    color: #cacaca;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}

.installer a.close:hover:after {
    right: 38px;
    opacity: 1;
}

.installer .info {
    position: absolute;
    top: 40px;
    left: 40px;
    height: calc(100% - 80px);
    width: 200px;
}

.installer .info:before {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 180px;
    height: 220px;
    line-height: 220px;
    text-align: center;
    font-size: 1000%;
    color: #3F8EFC;
}

.installer .info:after {
    content: attr(data-weight);
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 180px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 100%;
    font-weight: bolder;
    letter-spacing: 2px;
    color: #aaa;
}

.installer#windows .info:before {
    content: "?";
}

.installer#mac .info:before {
    content: "?";
}

.installer#linux .info:before {
    content: "?";
}

.installer .details {
    position: absolute;
    top: 40px;
    right: 40px;
    height: 200px;
    width: calc(100% - 280px);
    padding: 10px;
}

.installer .details p {
    margin: 0px;
    font-weight: bolder;
    font-size: 120%;
    color: #444;
}

.installer .details span {
    color: #cacaca;
}

.installer .details ul {
    padding-left: 0px;
    list-style: none;
    color: #888;
}

.installer .details ul li {
    margin-left: 0px !important;
    margin-bottom: 8px;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}

.installer .details ul li:before {
    content: "";
    margin-right: 0;
}

.installer:target .details ul li {
    margin-left: 10px;
    opacity: 1;
}

.installer:target .details ul li:nth-child(1) {
    transition-delay: 0.1s;
}

.installer:target .details ul li:nth-child(2) {
    transition-delay: 0.2s;
}

.installer:target .details ul li:nth-child(3) {
    transition-delay: 0.3s;
}

.installer:target .details ul li:nth-child(4) {
    transition-delay: 0.4s;
}

.installer label {
    position: absolute;
    bottom: 20px;
    right: 90px;
    height: 40px;
    width: calc(100% - 320px);
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
}

.installer label input {
    display: none;
}

.installer label span {
    position: absolute;
    height: 100%;
    width: 100%;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background: #3F8EFC;
}

.installer label input:checked~span {
    background: #87E544;
    animation: downloadSuccess 3.1s ease;
}

.installer label span:after {
    content: "DOWNLOAD";
    position: absolute;
    width: 80%;
    height: 100%;
    top: 0px;
    left: 10%;
}

.installer label input:checked~span:after {
    content: "Thank you for download!";
    animation: downloadState 3s;
}

.installer label span:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    opacity: 0;
    background: rgba(255, 255, 255, 0.2);
}

.installer label input:checked~span:before {
    animation: downloadProgress 3s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}

@keyframes downloadSuccess {

    0%,
    90% {
        background: #3F8EFC;
    }

    100% {
        background: #87E544;
    }
}

@keyframes downloadState {

    0%,
    95% {
        content: "DOWNLOADING...";
    }

    100% {
        content: "Thank you for download!";
    }
}

@keyframes downloadProgress {
    0% {
        width: 5%;
        opacity: 1;
    }

    35% {
        width: 17%;
    }

    64% {
        width: 51%;
    }

    81% {
        width: 70%;
    }

    90% {
        width: 86%;
        opacity: 1;
    }

    100% {
        width: 100%;
        opacity: 0;
    }
}

//Doesn't require any JS.

This snippet showcases a visually appealing and interactive app download button designed to encourage users to download your application. The button features a modern design, hover effects, and a tooltip providing additional information.

Key Features:

Responsive Design: The button adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.
Customizable Styling: Easily modify the appearance of the button using CSS to match your website's design and branding.
Hover Effects: The button incorporates visually appealing hover effects to draw attention and provide feedback when users interact with it.

Implementation:

Create the HTML Structure: Set up the basic HTML structure for the download button, including the button element and the tooltip container.
Apply CSS Styles: Use CSS to style the button, including its background color, border, font size, and hover effects. Customize the appearance of the tooltip as well.
Add JavaScript for Tooltip Functionality: Implement JavaScript to display the tooltip when the user hovers over the button and hide it when the user moves away. You can use event listeners and CSS classes to achieve this.

Latest Snippets

View All