Un code par securearray494

Ouvrir dans l'éditeur Publiez votre code

Recommandé

8 June 2025

un site Web de plateforme

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple Liquid Glass Buttons</title>
    <link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@400;600&display=swap" rel="stylesheet">
    <style>
        /* Basic Reset & Font */
        body {
            font-family: 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f2f5; /* Light background */
            color: #333;
            flex-direction: column;
            gap: 20px;
        }

.button-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            padding: 20px;
        }

/* Base Button Styles */
        .liquid-button {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 28px;
            border: none;
            border-radius: 10px; /* More rounded for liquid effect */
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
            cursor: pointer;
            overflow: hidden;
            transition: all 0.2s ease-in-out;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

/* Liquid Glass Highlight Effect */
        .liquid-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 50%; /* Top half for the highlight */
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
            border-radius: 10px 10px 0 0;
            pointer-events: none; /* Allows clicks to pass through */
            opacity: 1;
            transition: opacity 0.2s ease-in-out;
        }

/* Hover Effect */
        .liquid-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }

.liquid-button:hover::before {
            opacity: 0.8;
        }

/* Active (Pressed) Effect */
        .liquid-button:active {
            transform: translateY(0);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.1);
        }

.liquid-button:active::before {
            opacity: 0; /* Highlight disappears when pressed */
        }

/* Color Variations */

/* Blue (Safari/Finder) */
        .liquid-button.blue {
            background: linear-gradient(to bottom, #50a7f1, #007aff);
            border: 1px solid #0056b3;
        }

/* Green (Messages/Reminders) */
        .liquid-button.green {
            background: linear-gradient(to bottom, #86d47d, #4CAF50);
            border: 1px solid #388E3C;
        }

/* Red (Mail/Photos) */
        .liquid-button.red {
            background: linear-gradient(to bottom, #ff7b7b, #ff3b30);
            border: 1px solid #cc0000;
        }

/* Gray (System UI) */
        .liquid-button.gray {
            background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
            border: 1px solid #c0c0c0;
            color: #333;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }
        .liquid-button.gray::before {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1));
        }
        .liquid-button.gray:hover {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }
        .liquid-button.gray:active {
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.05);
        }

/* Disabled State (optional) */
        .liquid-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        .liquid-button:disabled::before {
            opacity: 0.5;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
        }

/* For demonstration purposes */
        h1 {
            color: #333;
            font-size: 2.5em;
            font-weight: 600;
            margin-bottom: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Apple Liquid Glass Buttons</h1>

<div class="button-container">
        <button class="liquid-button blue">
            Blue Button
        </button>

<button class="liquid-button green">
            Green Button
        </button>

<button class="liquid-button red">
            Red Button
        </button>

<button class="liquid-button gray">
            Gray Button
        </button>

<button class="liquid-button blue" disabled>
            Disabled Button
        </button>
    </div>
</body>
</html>

Un code par securearray494

Recommandé

Un code par programmationant

Un code par bachir123

un site Web de plateforme

HTML

CSS

JS

Recommandé

Un code par programmationant

Un code par bachir123

un site Web de plateforme

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS