Home/Explore/

Triangle buttons

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

    /* Spacing */
    padding: 8px;
">
    <!-- Triangle -->
    <div style="
        border-color: transparent transparent rgba(0, 0, 0, 0.3);
        border-style: solid;
        border-width: 0px 8px 8px;

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

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

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

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

    <!-- Triangle -->
    <div style="
        border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
        border-style: solid;
        border-width: 8px 0px 8px 8px;

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

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

    /* Spacing */
    padding: 8px;
">
    <!-- Triangle -->
    <div style="
        border-color: rgba(0, 0, 0, 0.3) transparent transparent;
        border-style: solid;
        border-width: 8px 8px 0px;

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

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

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

    /* Spacing */
    padding: 8px;
">
    <!-- Triangle -->
    <div style="
        border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
        border-style: solid;
        border-width: 8px 8px 8px 0px;

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

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

Related patterns

Arrow buttons

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