Cirkit Designer Logo
Cirkit Designer
Your all-in-one circuit design IDE
Home / 
Component Simulation Code

Pushbutton (SIM TEST) Simulation Source Code Example

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

This tab defines the visual layout of your custom component using HTML. You can specify how your component appears in the circuit, including interactive elements that respond to user input. 
<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: 22px;
        /* Adjust size as needed to match the brown area */
        height: 22px;
        /* Adjust size as needed to match the brown area */
        border-radius: 50%;
        background: radial-gradient(circle, #4CAF50 0%, #2E7D32 60%, #1B5E20 100%);
        border: 2px solid #1B5E20;
        box-shadow: inset -5px -5px 10px 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 5px 5px 10px rgba(0, 0, 0, 0.4);
    }
</style>