Home/Explore/

Close button

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
<button style="
    /* Reset */
    background-color: transparent;
    border-color: transparent;

    /* Cursor */
    cursor: pointer;

    /* Size */
    height: 32px;
    width: 32px;

    /* Used to position the inner */
    position: relative;
">
    <div style="
        /* Background color */
        background-color: rgba(0, 0, 0, 0.3);

        /* Position */
        left: 0px;
        position: absolute;
        top: 50%;
        transform: translate(0%, -50%) rotate(45deg);

        /* Size */
        height: 1px;
        width: 100%;
    " />

    <div style="
        /* Background color */
        background-color: rgba(0, 0, 0, 0.3);

        /* Position */
        left: 50%;
        position: absolute;
        top: 0px;
        transform: translate(-50%, 0%) rotate(45deg);

        /* Size */
        height: 100%;
        width: 1px;
    " />
</button>

Related patterns

Arrow buttons

Chip

×

Modal

×

Notification

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