Un código de securearray494

1242 securearray494

Abrir en el editor Video Publica tu código

Recomendado

21 January 2025

Página de destino de la agencia inmobiliaria

3 June 2025

Reproductor de vídeo brutalista

11 September 2025

Plantilla de sitio web HTML de Starbucks

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 código de securearray494

Recomendado

Página de destino de la agencia inmobiliaria

Reproductor de vídeo brutalista

Plantilla de sitio web HTML de Starbucks

HTML

CSS

JS

Recomendado

Página de destino de la agencia inmobiliaria

Reproductor de vídeo brutalista

Plantilla de sitio web HTML de Starbucks

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS