Ein Code von securearray494

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Empfohlen

13 June 2025

Code Blüte

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>

Ein Code von securearray494

Empfohlen

Ein Code von ashimadison8

Ein Code von cleancloud199

Code Blüte

HTML

CSS

JS

Empfohlen

Ein Code von ashimadison8

Ein Code von cleancloud199

Code Blüte

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS