Material 3 Tonal Button - Free UI Component

Surface Color #f3e7ff

On-Surface Color #21005d

Button Label Request Access

Elevation 1

Rounding (px) 100

Vertical Padding (rem) 0.75

Horizontal Padding (rem) 2.5

Font Size (rem) 1

Material 3 Tonal Button

A standard Google Material Design 3 (M3) tonal button. Features a wide corner radius, subtle elevation shadows, and a sophisticated state-overlay for interactive feedback.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Material Design Button</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
    <style>
        /* -- Variables ------------------------------------------------- */
        :root {
            --surface: {{surfaceColor}};         /* Primary Surface */
            --on-surface: {{textColor}};         /* Text/Icon Color */
            --radius: {{borderRadius}}px;        /* Corner Rounding (M3 uses larger) */
            --v-pad: {{vPadding}}rem;            /* Top/Bottom Padding */
            --h-pad: {{hPadding}}rem;            /* Left/Right Padding */
            --font-size: {{fontSize}}rem;        /* Text Size */
            --elevation: {{elevation}};          /* Shadow Intensity 0-5 */
            --page-bg: #fff;                     /* Preview Background */
        }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--page-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

/* -- Button Implementation --------------------------------------- */
        .btn-material {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: var(--v-pad) var(--h-pad);
            font-size: var(--font-size);
            font-weight: 500;
            color: var(--on-surface);
            background-color: var(--surface);
            border: none;
            border-radius: var(--radius);
            cursor: pointer;
            text-decoration: none;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            outline: none;
            overflow: hidden;
            
            /* Material Elevation (M3 Tonal/Elevated style) */
            box-shadow: 
                0 calc(var(--elevation) * 1px) calc(var(--elevation) * 3px) rgba(0,0,0,0.1),
                0 calc(var(--elevation) * 1px) calc(var(--elevation) * 2px) rgba(0,0,0,0.08);
        }

/* State Overlay for Hover/Focus */
        .btn-material::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: currentColor;
            opacity: 0;
            transition: opacity 0.2s;
        }

.btn-material:hover {
            box-shadow: 
                0 calc((var(--elevation) + 2) * 1px) calc((var(--elevation) + 4) * 2px) rgba(0,0,0,0.12);
        }

.btn-material:hover::before {
            opacity: 0.08;
        }

.btn-material:focus::before {
            opacity: 0.12;
        }

.btn-material:active::before {
            opacity: 0.16;
        }

.btn-material:active {
            transform: scale(0.98);
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

</style>
</head>
<body>

<button class="btn-material">
        {{buttonText}}
    </button>

</body>
</html>