Tryit Editor v1.0 - Skillance Academy

Editor Kode Sumber Tekan Ctrl + Enter untuk Menjalankan

<!DOCTYPE html>

<html>

<head>

    <style>

        body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 200px; background: #fdf4ff; }

        .pill-btn {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            background: #a21caf;

            color: white;

            padding: 10px 20px;

            border-radius: 30px;

            font-weight: bold;

            font-size: 0.85rem;

            cursor: pointer;

            box-shadow: 0 4px 10px rgba(162, 28, 175, 0.2);

            border: none;

            transition: transform 0.2s;

        }

        .pill-btn:hover {

            transform: scale(1.05);

            background: #86198f;

        }

    </style>

</head>

<body>

    <button class="pill-btn" onclick="alert('Tombol UI/UX dirancang dengan prinsip Auto-Layout & Feedback Hover!')">

        <span>✨</span>

        <span>Tombol Auto-Layout Figma</span>

    </button>

</body>

</html>

Hasil Tampilan (Browser Preview)