CSS High Frequency Button Style

Rectangular and rounded buttons

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

They are very simple, width and height and 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 deformations of the rectangle, trapezoidal and parallelogram buttons often appear .

To realize them, you can mainly use 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 realize the shape, so that it will not affect the text in the button.

Parallelogram

Just use transform: skewX(), pay attention to the above, use the pseudo element 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, in addition transform: skewX(), parallelograms using gradients are also possible.

Probably something like this:

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

Trapezoidal

The trapezoid is a little more complicated than the parallelogram, and it uses more perspective, in fact, it uses a certain 3D transformation. The principle is a rectangle that rotates around the X axis

Just use perspectiveand 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;
    }
}

Cutting corners -- solid color background and gradient color background

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

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

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

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

Fortunately, we have another way, using to clip-pathcut out a corner-cutting graphic, 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
    );
}

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

Of course, the above code is very easy to think of the following 6-gon, which clip-path can be easily obtained by using gradient and sum:

arrow button

Next is the arrow button, carefully observe the corner cut button above, when enough corners on both sides are cut off, it becomes an arrow shape.

We can implement a single arrow button with a double gradient:

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

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

What if it is such an arrow shape?

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

Here is clip-paththe solution for :

{
    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 mostly appears in coupons. The most common solution is to use gradients. Of course, unlike corner cutting, radial gradients are used here.

First, look at this simple example:

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

Such a graph can be obtained:

background-sizeSo, just implement 4 such graphics at 4 corners under control :

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

Realize the gradient inscribed rounded corner button with the help of mask

What if the background color requires a gradient?

Assuming we have a rectangular background pattern, we only need to use to maskimplement a layer of masking, and use maskthe characteristics of to cover the 4 corners.

maskThe code of is very similar to the above-mentioned rounded corner cutting code, and a gradient inscribed rounded corner button can be obtained with a 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 understand maskthe principle of CSS properties first. If you are still a little unfamiliar with it, you can take a look at this article of mine:

Fantastic CSS MASK

rounded irregular rectangle

The shape of the button below is also the one that has been asked the most recently. Let’s take a look at its shape first:

It is not easy to name it, one side is a regular right angle with rounded corners, and the other side is a hypotenuse with rounded corners.

In fact, it is composed of rounded rectangle + 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 the other, a gradient is used for one of them, and a solid color is used for the other, and the colors can be perfectly connected together, so that the graphic of the gradient color is realized:

Bullet button

The next button shape is common on the Tab page, similar to Chrome's page break:

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

Just figure out how to achieve the curved triangle 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 transparency, 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:

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

double flow border

clip-path: Set the position of after and before

filter: set the color

position: set the position

@keyframes animation

<div>测试</div>

div {
      margin: 100px auto;
      background: rebeccapurple;
      line-height: 30px;
      padding: 0 20px;
      color: #fff;
      border-radius: 5px;
      width: 100px;
      position: relative;
    }

    div::after {
      animation: clippath 3s infinite linear;
      content: "";
      border: 2px solid rebeccapurple;
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
    }

    div::before {
      animation: clippath 3s infinite -1.5s linear;
      content: "";
      border: 2px solid rebeccapurple;
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
    }

    @keyframes clippath {

      0%,
      100% {
        clip-path: inset(0 0 96% 0);
        filter: hue-rotate(0deg);
      }

      25% {
        clip-path: inset(0 96% 0 0);
      }

      50% {
        filter: hue-rotate(360deg);
        clip-path: inset(96% 0 0 0);
      }

      75% {
        clip-path: inset(0 0 0 96%);
      }
    }

in conclusion

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

And in it:

Gradients (linear gradients linear-gradient, radial gradients radial-gradient, multiple gradients)
maskmask
cut outclip-path
out of shapetransform