Um código de securearray494

595 securearray494

Abrir no Editor Publique Seu Código

Recomendado

30 November 2024

Menu de navegação do Coreboot

25 August 2025

Modelo HTML para site de filme

16 July 2025

Formulário de login do Glassmorphic

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>

Um código de securearray494

Recomendado

Menu de navegação do Coreboot

Modelo HTML para site de filme

Formulário de login do Glassmorphic

HTML

CSS

JS

Recomendado

Menu de navegação do Coreboot

Modelo HTML para site de filme

Formulário de login do Glassmorphic

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS