securearray494 द्वारा एक कोड

349 securearray494

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

1 December 2024

robustvariable23 द्वारा एक कोड

22 August 2024

robustbug269 द्वारा एक कोड

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>

securearray494 द्वारा एक कोड

अनुशंसित

robustvariable23 द्वारा एक कोड

एक सरल लॉगिन पृष्ठ

robustbug269 द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

robustvariable23 द्वारा एक कोड

एक सरल लॉगिन पृष्ठ

robustbug269 द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS