CodePen Embed - CSS Various Button Shapes

Live

 
<div id='content'>
    <div class='btn rect'>rect</div>
    <div class='btn circle'>circle</div>
    <div class="g-multiple">
        <div class='btn parallelogram'>Parallelogram</div>
        <div class='btn trapezoid'>Trapezoid</div>
    </div>
    <div class="g-multiple">
        <div class="btn notching">notching</div>
        <div class="btn clip-notching">notching</div>
        <div class="btn diamond">Diamond</div>
    </div>
    <div class="g-multiple">
        <div class="btn arrow">arrow</div>
        <div class="btn two-arrow">arrow</div>
        <div class="btn clip-arrow">arrow</div>
    </div>
    <div class="g-multiple">
        <div class="btn inset-circle">inset-circle</div>
        <div class="btn mask-inset-circle">inset-circle</div>
    </div>
    <div class="g-multiple">
        <div class="btn skew">Skew</div>
        <div class="btn skew2">Skew</div>
    </div>
    <div class="g-multiple">
        <div class="btn outside-circle">outside-circle</div>
    </div>
</div>

Live

​x
 
:root {
    --color-rect: #f6ed8d;
    --color-circle: #7de3c8;
    --color-notching: #ff1493;
    --color-notching2: #f9d9e7;
    --color-parallelogram: #03f463;
}
​
html,
body {
    width: 100%;
    min-height: 100%;
    font-size: 20px;
    text-align: center;
}
​
#content {
    width: 360px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin: auto;
}
​
.g-multiple {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-wrap: nowrap;
    margin: 0 auto;
}
​
.btn {
    margin: 20px;
    flex-shrink: 0;
    width: 160px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    // filter: drop-shadow(0 0 5px #000);
​
    &:hover {
        top: -1px;
    }
    &:active {
        top: 1px;
    }
​
    &.rect {
        background: var(--color-rect);
    }
​
    &.circle {
        border-radius: 64px;
        background: var(--color-circle);
    }
    
    &.parallelogram {
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: -20px;
            bottom: 0;
            right: -20px;
            z-index: -1;
            background: var(--color-parallelogram);
            transform: skewX(15deg);
        }
    }
    
    &.trapezoid {
        &::after {
          content:"";
          position: absolute;
          top: 0; right: 0; bottom: 0; left: 0;
          transform: perspective(40px) scaleY(1.3) rotateX(10deg);
          transform-origin: bottom;
          background: #ff9800;
          z-index:-1;
        }
    }
​
    &.notching {
        background: 
            linear-gradient(135deg, transparent 10px, #ff1493 0)top left,
            linear-gradient(-135deg, transparent 10px, #ff1493 0) top right,
            linear-gradient(-45deg, transparent 10px, #ff1493 0) bottom right,
            linear-gradient(45deg, transparent 10px, #ff1493 0) bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }
    
    &.diamond {
        background: 
            linear-gradient(135deg, transparent 22px, #bd1493 0)top left,
            linear-gradient(-135deg, transparent 22px, #bd1493 0) top right,
            linear-gradient(-45deg, transparent 22px, #bd1493 0) bottom right,
            linear-gradient(45deg, transparent 22px, #bd1493 0) bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
    }
​
    &.clip-notching {
        background: linear-gradient(
            45deg,
            #f9d9e7,
            #ff1493
        );
        clip-path: polygon(
            15px 0,
            calc(100% - 15px) 0,
            100% 15px,
            100% calc(100% - 15px),
            calc(100% - 15px) 100%,
            15px 100%,
            0 calc(100% - 15px),
            0 15px
        );
    }
​
    &.arrow {
        background: linear-gradient(
                    -135deg,
                    transparent 22px,
                    #04e6fb 22px,
                    #9006fb 100%
                )
                top right,
            linear-gradient(
                    -45deg,
                    transparent 22px,
                    #04e6fb 22px,
                    #9006fb 100%
                )
                bottom right;
        background-size: 100% 50%;
        background-repeat: no-repeat;
    }
​
    &.two-arrow {
        background: 
            linear-gradient( -135deg, transparent 22%, #04e6fb 22%, #9006fb 78%, transparent 0) top right,
            linear-gradient(-45deg, transparent 22%, #04e6fb 22%, #9006fb 78%, transparent 0) bottom right;
        background-size: 100% 50%;
        background-repeat: no-repeat;
    }
​
    &.clip-arrow {
        background: linear-gradient(45deg, #04e6fb, #65ff9a);
        clip-path: polygon(
            0 0,
            30px 50%,
            0 100%,
            calc(100% - 30px) 100%,
            100% 50%,
            calc(100% - 30px) 0
        );
    }
​
    &.inset-circle {
        background-size: 70% 70%;
        background-image: radial-gradient(
                circle at 100% 100%,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            ),
            radial-gradient(
                circle at 0 0,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            ),
            radial-gradient(
                circle at 100% 0,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            ),
            radial-gradient(
                circle at 0 100%,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            );
        background-repeat: no-repeat;
        background-position: right bottom, left top, right top, left bottom;
    }
​
    &.mask-inset-circle {
        background: linear-gradient(45deg, #2179f5, #e91e63);
        mask: radial-gradient(
                circle at 100% 100%,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            ),
            radial-gradient(
                circle at 0 0,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            ),
            radial-gradient(
                circle at 100% 0,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            ),
            radial-gradient(
                circle at 0 100%,
                transparent 0,
                transparent 12px,
                #2179f5 13px
            );
        mask-repeat: no-repeat;
        mask-position: right bottom, left top, right top, left bottom;
        mask-size: 70% 70%;
    }
​
    &.skew {
        position: relative;
        width: 120px;
        text-indent: 10px;
​
        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: orange;
            transform: skewX(15deg);
            border-radius: 10px;
            z-index: -1;
        }
        &::before {
            content: "";
            position: absolute;
            top: 0;
            right: -13px;
            width: 100px;
            height: 64px;
            border-radius: 10px;
            background: orange;
            z-index: -1;
        }
    }
    
    &.skew2 {
        width: 120px;
        position: relative;
        
        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, orange, #ff1800);
            transform: skewX(15deg);
            border-radius: 10px;
            z-index: -1;
        }
        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: -13px;
            width: 100px;
            height: 64px;
            border-radius: 10px;
            background: orange;
            z-index: -1;
        }
    }
    
    &.outside-circle {
        position: relative;
        background: #e91e63;
        border-radius: 10px 10px 0 0;
​
        &::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            left: -20px;
            bottom: 0;
            background: #000;
            background:radial-gradient(circle at 0 0, transparent 20px, #e91e63 21px);
        }
        &::after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            right: -20px;
            bottom: 0;
            background: #000;
            background:radial-gradient(circle at 100% 0, transparent 20px, #e91e63 21px);
        }
    }
}
​

This Pen is owned by mafqla on CodePen. It is a fork of this Pen.

See more by @mafqla on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.