Use CSS to easily implement some frequently appearing weird buttons

background

In the group, some students will ask related questions, such as how to use CSS to implement an inset corner button and how to implement a button with an arrow?

This article is based on some buttons that appear frequently in design drafts and are slightly difficult and skillful to implement using CSS. It explains how to implement them as much as possible using CSS.

Let's first take a look at these commonly seen button shapes:

Rectangular and rounded buttons

Normally, we encounter two types of buttons - rectangular and rounded:

They are very simple, with width, height, rounded corners and a background color.

 <div class='btn rect'>rect</div>
    <div class='btn circle'>circle</div>

.btn {
    margin: 8px auto;
    flex-shrink: 0;
    width: 160px;
    height: 64px;
}
.rect {
    background: #f6ed8d;
}

.circle {
    border-radius: 64px;
    background: #7de3c8;
}

Trapezoid and Parallelogram

Next, based on the deformation of the rectangle, trapezoidal and parallelogram buttons often appear.

To achieve them, you can mainly use transform , but one thing to note is that after using transform , the text in the label will also be deformed. Therefore, we usually use pseudo-elements of elements to achieve the shape, so as not to affect the text in the button.

Parallelogram

Just use transform: skewX() . Note that as mentioned above, use the pseudo-element of the element to realize the parallelogram so as not to affect the text inside.

<div class='btn parallelogram'>Parallelogram</div>

.parallelogram {
    position: relative;
    width: 160px;
    height: 64px;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #03f463;
        transform: skewX(15deg);
    }
} 

If you don’t want to use pseudo-elements, in addition to transform: skewX() , a parallelogram can also be achieved using a gradient.

It's probably like this:

{
    background: linear-gradient(45deg, transparent 22%, #04e6fb 22%, #9006fb 78%, transparent 0);
}

Trapezoid

The trapezoid is a little more complicated than the parallelogram. It makes more use of perspective and actually utilizes certain 3D transformations. The principle is a rectangle, rotated around the X axis, like this:

Use perspective and transform: rotateX() . Of course, they can be written together:

<div class='btn trapezoid'>Trapezoid</div>

.parallelogram {
    position: relative;
    width: 160px;
    height: 64px;

    &::after {
          content:"";
          position: absolute;
          top: 0; right: 0; bottom: 0; left: 0;
          transform: perspective(40px) rotateX(10deg);
          transform-origin: bottom;
          background: #ff9800;
    }
} 

Cutaway - solid color background and gradient background

Next is the cut corners. The most common method is to use linear-gradient to achieve this. Let's take a look at this figure.

<div></div>

.notching {
    background: linear-gradient(135deg, transparent 10px, #ff1493 0);
    background-repeat: no-repeat;
}

The results are as follows,

Based on this, we only need to use multiple gradients to achieve 4 such graphics, and use background-position to locate the four corners:

<div class="notching">notching</div>

.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;
} 

Using clip-path to achieve gradient background cut-off graphics

Of course, there is a problem with this technique. When the background color is required to be a gradient color, this method becomes rather clumsy.

Fortunately, we have another way to cut out a corner shape with the help of clip-path . In this way, the background color can be any customized color, whether it is a gradient or a solid color:

<div class="clip-notching">notching</div>

.clip-notching {
    background: linear-gradient(
        45 degrees,
        #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
    );
}

Simply implement a gradient background. The core is to use clip-path: polygon() to cut out the shape we want (an 8-sided polygon) based on the gradient rectangle:

Of course, the above code is very easy to associate with the following hexagon, which can be easily obtained using gradients and clip-path :

Arrow buttons

Next is the arrow button. Look carefully at the corner cutting button above. When the corners on both sides are cut off enough, it becomes an arrow shape.

We can use two gradients to create a single arrow button:

<div class="arrow">arrow</div>

&.arrow {
    background: linear-gradient(
                -135deg,
                transparent 22px,
                #04e6fb 22px,
                #65ff9a 100%
            )
            top right,
        linear-gradient(
                -45deg,
                transparent 22px,
                #04e6fb 22px,
                #65ff9a 100%
            )
            bottom right;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}

An arrow appears:

It is a combination of two gradient blocks, one above the other. You can immediately understand it by changing the color:

What if it is an arrow shape like this?

Similarly, it is also the superposition of two gradients, and the gradient color is transparent--> color A--> color B--> transparent. Of course, you can also use clip-path here:

Here is the clip-path solution:

{
    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
    );
}

Inscribed fillet

The button shape below often appears in coupons. The most common solution is to use gradient. Of course, unlike the corner cut, the radial gradient used here is different.

First, let's look at a simple example:

<div></div>

div {
    background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 12px);
}

You can get a graph like this:

So, just control background-size and implement 4 such graphics in the 4 corners:

<div class="inset-circle">inset-circle</div>

&.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;
} 

Use mask to achieve gradient inscribed rounded button

What if the background color requires a gradient?

Suppose we have a rectangular background pattern, we only need to use mask to implement a layer of masking, and use the characteristics of mask to cover the four corners.

The code of mask is very similar to the rounded corner code mentioned above. A simple modification can get a gradient inscribed rounded corner button:

<div class="mask-inset-circle">inset-circle</div>

.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%;
}

In this way, we get a graph like this:

Of course, to understand the above code, you need to first understand the principle of CSS mask property. If you are still unfamiliar with it, you can take a look at my article:

Magical CSS MASK

Irregular rounded rectangle

The following button shape is also the most asked question recently. Let’s take a look at its shape first:

It’s not easy to name it. One side is a regular right angle with rounded corners, and the other side is a bevel with rounded corners.

In fact, it is composed of a rounded rectangle + a rounded parallelogram:

So, with the help of two pseudo-elements, they can be easily implemented:

<div class="skew">Skew</div>

.skew {
    position: relative;
    width: 120px;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 10px;
        background: orange;
        transform: skewX(15deg);
    }
    &::before {
        content: "";
        position: absolute;
        top: 0;
        right: -13px;
        width: 100px;
        height: 64px;
        border-radius: 10px;
        background: orange;
    }
} 

Since one pseudo-element is superimposed on another, a gradient is used for one of them and a solid color is used for the other. Their colors can be perfectly connected together, thus realizing the gradient color graphic:

Round Corner Button

The following button shape is commonly seen on the Tab page, similar to the Chrome paging:

Let's break down the button shape. It's actually a stack of three pieces:

You just need to figure out how to achieve the arc triangles on both sides. Here we still use the gradient - radial gradient. In fact, it is like this. As shown in the figure below, we only need to replace the black part with transparent, using two pseudo elements:

The code is as follows:

<div class="outside-circle">outside-circle</div>

.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);
    }
}

You can get:

You can see the full code for all the above graphics here: CodePen Demo - CSS Various Button Shapes | CSS Various Button Shapes

To sum up

Based on the above implementation, it is not difficult to find that some slightly special buttons are implemented through splicing, sleight of hand, masking and other methods.

And in it:

• Gradient (linear gradient linear-gradient , radial gradient radial-gradient , multiple gradients)
• mask
• Clipping clip-path
• transform

They play an important role. If we use them skillfully, we can easily handle these graphics and face their deformations with ease.

The above graphics, combined with filter: drop-shadow() , can basically achieve irregular shadows.

Furthermore, a more complex graph is shown below:

Let’s cut the picture. Although CSS is good, the input-output ratio also needs to be considered in actual use.

at last

The purpose of this article is more to serve as a simple manual. In practice, there may be better ways to achieve the above effects. This article does not enumerate them one by one. You are welcome to add or correct them.

Well, this article ends here. I hope this article is helpful to you.

More wonderful CSS technical articles are collected in my Github -- iCSS. They are continuously updated. Welcome to click a star to subscribe and collect.

If you have any questions or suggestions, please feel free to communicate with me. This is an original article, and my writing skills are limited. If there is anything wrong in the article, please let me know.

This is the end of this article about how to use CSS to easily implement some frequently appearing weird-shaped buttons. For more relevant CSS weird-shaped button content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!