CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
.home
~
.explore

Spin button

<div style="
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    display: flex;
">
    <!-- Input -->
    <input type="text" style="
        border-color: transparent;
        margin-right: 4px;
        padding: 4px;
        width: 100px;
    " />

    <!-- Buttons container -->
    <div style="
        /* Content is centered vertically */
        display: flex;
        flex-direction: column;
        justify-content: center;
    ">
        <!-- Up button -->
        <button style="
            border-color: transparent;
            /* Make buttons have the same height */
            flex: 1,
        ">
            ...
        </button>

        <!-- Down button -->
        <button style="
            border-color: transparent;
            /* Make buttons have the same height */
            flex: 1,
        ">
            ...
        </button>
    </div>
</div>

Related patterns

-
+

Stepper input

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!