Webleb - UI Elements - download app card

HTML

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="react.css">
</head>
<body>

<div class="gradient-background"></div>
    <section class="download-app">
        <h2>Download the App Now</h2>
        <p>If you want to discover much more, download the app now from the App Store or Google Play</p>
        <div class="buttons">
            <a href="#" class="btn google-play">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Google_Play_Store_badge_EN.svg/2560px-Google_Play_Store_badge_EN.svg.png" alt="Google Play">
            </a>
            <a href="#" class="btn app-store">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Download_on_the_App_Store_Badge.svg/2560px-Download_on_the_App_Store_Badge.svg.png" alt="App Store">
            </a>
        </div>
    </section>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.gradient-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #2f2f2f, #000000, #474747);
    background-size: 300% 300%;
    animation: gradientMove 10s ease infinite;
    z-index: -1;
}

.download-app {
    background: rgba(255, 255, 255, 0.95);
    padding: 60px 40px;
    border-radius: 30px;
    box-shadow: 0px 12px 60px rgba(0, 0, 0, 0.15);
    text-align: center;
    max-width: 700px;
    width: 90%;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 1s ease-out;
    backdrop-filter: blur(20px);
}

.download-app h2 {
    font-size: 3.2em;
    font-weight: 800;
    margin-bottom: 20px;
    background: linear-gradient(to right, #000000, #212121, #545354);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    animation: slideInDown 1s ease-out;
}

.download-app p {
    font-size: 1.2em;
    color: #000000;
    margin-bottom: 40px;
    line-height: 1.8;
    max-width: 550px;
    margin: 0 auto;
    animation: fadeInUp 1.5s ease-out;
}

.buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;

}

.btn {
    display: inline-block;
    width: 100%;
    max-width: 230px;
    height: 70px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    margin: 10px;
}

.btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
    border-radius: 20px;
}

.btn:hover {
    transform: translateY(-5px);
    box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.2);
}

.btn:hover img {
    opacity: 0.85;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

download app card

Recommended

CSS Card Layout with Gradient Background

Neumorphic Profile Card HTML CSS Template

Glassmorphism Product Card

HTML

CSS

JS

Recommended

CSS Card Layout with Gradient Background

Neumorphic Profile Card HTML CSS Template

Glassmorphism Product Card

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS