Use CSS to easily realize all kinds of weird buttons with high frequency

background

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

Based on some of the buttons that frequently appear in the design draft, using CSS to achieve a little bit difficult and skillful buttons, this article explains how to use CSS to achieve them as much as possible.

Let us first take a look at these button shapes that often appear:

Rectangle and rounded buttons

Normally, the buttons we encounter are of these two types - rectangles and rounded corners:

They are very simple, wide and high, rounded corners and 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, buttons of trapezoid and parallelogram

To achieve them transform , but it should be noted that after using transform , the text in the label will also be deformed in the same way. Therefore, we usually use the pseudo-element of the element to achieve the shape, so that it does not affect the button. Word.

Parallelogram

transform: skewX() use 061a6de3ad17b4. Pay attention to what has been said above. Use the pseudo-elements of the element to realize the parallelogram, so as not to affect the internal text.

<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, except for transform: skewX() , it is also possible to use gradients for parallelograms.

It's probably like this:

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

Trapezoid

The trapezoid is slightly more complicated than the parallelogram. It uses perspective , but actually uses a certain 3D transformation. The principle is a rectangle, rotating 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;
    }
}

Cut corners-solid color background and gradient background

Next is the corner cut graphics. The most common method is to use the gradient linear-gradient realize such a graphic.

<div></div>

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

The result is as follows,

Based on this, we only need to use multiple gradients to achieve 4 such graphics, and use background-position 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;
}

Use clip-path to realize the cut corner graphics of gradient background

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

Fortunately, we have another way to clip-path , so that 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(
        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
    );
}

Simply implement a gradient background, and then the core is to use clip-path: polygon() cut out the shape we want (an 8-sided shape) on the basis of the gradient rectangular shape:

Of course, the above code is very easy to think of the following 6-sided shapes, which can be easily obtained by clip-path

Arrow button

Next is the arrow button. Take a closer look at the corner cut button above. When the corners on both sides are cut off enough, it becomes an arrow shape.

We can use the two-fold gradient to achieve 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 came out:

It is obtained by the combination of the upper and lower gradient blocks, and you can immediately understand it by changing the color:

What if it is such an arrow shape?

The same, it is also the superposition of two gradients, the gradient color is transparent --> color A --> color B --> transparent . clip-path can also be used here:

Here is the solution clip-path

{
    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 following button shape appears mostly in coupons. The most common solution is to use a gradient. Of course, unlike the corner cut, the radial gradient is used here.

First, look at such a simple example:

<div></div>

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

You can get such a graph:

Therefore, you only need to control background-size and realize 4 such graphics in 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?

Assuming we have a rectangular background pattern, we only need to use mask realize a layer of mask, and use mask to cover the 4 corners.

mask is very similar to the above-mentioned round corner chamfering code, and a gradual inscribed round corner button can be obtained by simple modification:

<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 such a graph:

Of course, to understand the above code, you need to first figure out mask property. If you are still a little unfamiliar with it, you can read this article of mine:

Wonderful CSS Mask

Irregular rectangle with rounded corners

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

It’s not easy to name it, one side has a regular rounded right angle, and the other side has a rounded hypotenuse.

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

Therefore, 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 the other, a gradient is used for one of them, and the other is a pure color. The colors can be perfectly connected together, so that the gradient color is realized:

Round button

The next button shape, which is commonly found on the Tab page, is similar to Chrome's tabs:

Let's disassemble this button shape, here is actually a superposition of 3 pieces:

Just think about how to realize the arc triangles on both sides. Here is 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, and use two pseudo-elements:

code show as below:

<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:

The complete code of all the above graphics, you can see here: CodePen Demo - CSS Various Button Shapes | CSS Various Button Shapes

in conclusion

Based on the above implementation, it is not difficult for us to find that some slightly special buttons are all realized by stitching, blinding, masking, etc.

And in it:

• Gradient (linear gradient linear-gradient , radial gradient radial-gradient , multiple gradients)
• Mask mask
• Crop clip-path
• Deformation transform

Played an important role, and use them proficiently, we can grasp these graphics at our fingertips, and can face them calmly based on their deformation.

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

Furthermore, the more complex graphics are as follows:

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

finally

The purpose of this article is more to be a simple manual. In practice, there may be better ways to achieve the above effects. This article does not enumerate one by one, and we welcome additional corrections.

Okay, this concludes this article, I hope this article is helpful to you :)

Want to get the most interesting CSS information, don’t miss my account - 161a6de3ad226e iCSS front-end facts 161a6de3ad2270 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.