Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "what high-frequency strange button styles appear in CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Let's first take a look at these frequently occurring button shapes:

Rectangle and fillet button

Normally, there are only two kinds of buttons we encounter-rectangles and rounded corners:

They are very simple, wide and high, with rounded corners and background colors.

Rect circle.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, there are often trapezoidal and parallelogram buttons.

To achieve them can mainly use transform, but it should be noted that after the use of transform, the text in the tag will be the same deformation, so we usually use pseudo elements of the element to achieve modeling, so that it does not affect the text inside the button.

Parallelogram

Using transform: skewX (), note that the pseudo element of the element is used to achieve parallelogram, so that the internal text is not affected.

Parallelogram.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, it's possible for parallelograms to use gradients in addition to transform: skewX ().

That's something like this:

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

Trapezoid

The trapezoid is a little more complex than the parallelogram. It makes use of perspective, which actually uses a certain 3D transformation. The principle is a rectangle that rotates around the X axis, like this:

You can use perspective and transform: rotateX (), which, of course, can be written together:

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

Chamfer-pure color background and gradual color background

Next is the chamfer graphics, the most common method is mainly with the help of gradient linear-gradient to achieve, look at such a figure

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 four such graphics, and use background-position to locate the four corners:

Notching.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 realize chamfering figure of gradient background

Of course, there is a problem with this technique, which is clumsy when the background color is required to be graded.

Fortunately, there is another way to cut a chamfer with clip-path, so that the background color can be any custom color, whether it is a gradient or a solid color:

Notching.clip-notching {background: linear-gradient (45deg, # f9d9e7, # ff1493) Clip-path: polygon (15px 0, calc (15px) 0,100% 15px, 100% calc (100%-15px), calc (100%-15px) 100%, 15px 100%, 0 calc (15px), 0 15px);}

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

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

Arrow button

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

We can use double gradients to implement a single arrow button:

Arrow&.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 a combination of the upper and lower gradient blocks, which can be understood immediately by changing the color:

What if it is such an arrowhead shape?

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

Here is the solution of clip-path:

{background: linear-gradient (45deg, # 04e6fb, # 65ff9a); clip-path: polygon (00, 30px 50%, 0100%, calc (100%-30px) 100%, 100% 50%, calc (100%-30px) 0);}

Inscribed fillet

The following button shape, which often appears in coupons, is also the most common solution to use gradients, and of course, unlike chamfering, radial gradients are used here.

First of all, look at a simple example:

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

You can get a figure like this:

Therefore, you only need to control the background-size and implement four such graphics in four corners:

Inset-circle&.inset-circle {background-size: 70% Background-image: radial-gradient (circle at 100%, transparent 0, transparent 12px, # 2179f5 13px), radial-gradient (circle at 00, transparent 0, transparent 12px, # 2179f5 13px), radial-gradient (circle at 100% 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 inscribed fillet button with the help of mask

What if the background color requires a gradient?

Suppose we have a rectangular background pattern, we only need to use mask to achieve a mask, using the characteristics of mask, to cover the four corners.

The mask code is very similar to the above fillet chamfer code. With a simple modification, you can get a gradual inner chamfer button:

Inset-circle.mask-inset-circle {background: linear-gradient (45deg, # 2179f5, # e91e63) Mask: radial-gradient (circle at 100%, transparent 0, transparent 12px, # 2179f5 13px), radial-gradient (circle at 00, transparent 0, transparent 12px, # 2179f5 13px), radial-gradient (circle at 100% 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 figure like this:

Of course, to understand the above code, you need to first understand how the CSS mask attribute works.

Rounded irregular rectangle

Here is the shape of the button, which has been asked the most recently. Let's take a look at its shape:

It is not easy to give it a name, with regular rounded right corners on one side and rounded beveled edges on the other.

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

So, with the help of two pseudo elements, you can easily implement them:

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

Because one pseudo element is superimposed on top of the other, a gradient is used for one, and the other is a solid color, and the colors can be perfectly linked together, thus realizing the graph of the gradient:

Outer fillet button

The next button shape, which is common on Tab pages, is similar to Chrome paging:

Let's disassemble the shape of this button, which is actually a stack of three pieces:

You just need to figure out how to achieve the curved triangle on both sides. Here or with the help of gradient-radial gradient, in fact, he is like this, as shown in the following figure, we only need to replace the black part with transparency and use two pseudo elements:

The code is as follows:

Outside-circle.outside-circle {position: relative; background: # e91e63; border-radius: 10px 10px 00; &: before {content: ""; position: absolute; width: 20px; height: 20px; left:-20px; bottom: 0; background: # 000; background:radial-gradient (circle at 00, transparent 20px, # e91e63 21px) } &:: after {content: "; position: absolute; width: 20px; height: 20px; right:-20px; bottom: 0; background: # 000; background:radial-gradient (circle at 100%, transparent 20px, # e91e63 21px);}}

You can get:

The complete code of all the above graphics can be seen here: CodePen Demo-- CSS Various Button Shapes | CSS various shape buttons

To sum up.

Based on the above implementation, it is not difficult to find that some slightly special buttons are achieved by splicing, blindness, masking and so on.

And among them:

Gradient (linear gradient linear-gradient, radial gradient radial-gradient, multiple gradient)

Mask mask

Crop clip-path

Deformable transform

By playing an important role and using them skillfully, we can get to know these graphics easily and face the deformation based on them calmly.

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

Furthermore, the more complex graphics are as follows:

Let's cut the picture. Although CSS is good, it also needs to consider the input-output ratio in practical use.

This is the end of the content of "what are the strange button styles that appear at high frequency in CSS". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.