Home/Explore/

Arrow buttons

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
<!-- Up arrow button -->
<button style="
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Spacing */
    padding: 8px;
">
    <!-- Arrow -->
    <div style="
        /* Transparent background */
        background-color: transparent;

        /* Edges */
        border-left: 1px solid rgba(0, 0, 0, 0.3);
        border-top: 1px solid rgba(0, 0, 0, 0.3);
        transform: translateY(25%) rotate(45deg);

        /* Size */
        height: 12px;
        width: 12px;
    "></div>

    <!-- Content -->
    ...
</button>

<!-- Right arrow button -->
<button style="
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Spacing */
    padding: 8px;
">
    <!-- Content -->
    ...

    <!-- Arrow -->
    <div style="
        /* Transparent background */
        background-color: transparent;

        /* Edges */
        border-right: 1px solid rgba(0, 0, 0, 0.3);
        border-top: 1px solid rgba(0, 0, 0, 0.3);
        transform: translateX(-25%) rotate(45deg);

        /* Size */
        height: 12px;
        width: 12px;
    "></div>
</button>

<!-- Down arrow button -->
<button style="
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Spacing */
    padding: 8px;
">
    <!-- Arrow -->
    <div style="
        /* Transparent background */
        background-color: transparent;

        /* Edges */
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        border-right: 1px solid rgba(0, 0, 0, 0.3);
        transform: translateY(-25%) rotate(45deg);

        /* Size */
        height: 12px;
        width: 12px;
    "></div>

    <!-- Content -->
    ...
</button>

<!-- Left arrow button -->
<button style="
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Spacing */
    padding: 8px;
">
    <!-- Arrow -->
    <div style="
        /* Transparent background */
        background-color: transparent;

        /* Edges */
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        border-left: 1px solid rgba(0, 0, 0, 0.3);
        transform: translateX(25%) rotate(45deg);

        /* Size */
        height: 12px;
        width: 12px;
    "></div>

    <!-- Content -->
    ...
</button>

Related patterns

Close button

Popover arrow

Triangle buttons

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