Component Simulation Code

Pushbutton Simulation Source Code Example

Explore the source code for simulating the Pushbutton in Cirkit Designer. Use this example as a starting point to learn about, customize, or extend the component's behavior in your own designs.

UI (html)

UI Script (ts)

Simulation State (json)

Simulation Logic (ts)

<button class="interactive-button" (mousedown)="component.handleButtonMouseDown()" (mouseup)="component.handleButtonMouseUp()"></button>

<style>
    .interactive-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 220px;
        /* Adjust size as needed to match the brown area */
        height: 220px;
        /* Adjust size as needed to match the brown area */
        border-radius: 50%;
        background: radial-gradient(circle, #4CAF50 0%, #2E7D32 60%, #1B5E20 100%);
        border: 20px solid #1B5E20;
        box-shadow: inset -50px -50px 100px rgba(0, 0, 0, 0.4);
        cursor: pointer;
        transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .interactive-button:active {
        background: radial-gradient(circle, #388E3C 0%, #2E7D32 60%, #1B5E20 100%);
        box-shadow: inset 50px 50px 100px rgba(0, 0, 0, 0.4);
    }
</style>