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

This article mainly explains "how to use pure CSS Material Design style button", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use pure CSS Material Design style button"!

Application of transform

All the deformations in CSS are done by transform (add the word before each browser if necessary). In the example, two deformation attributes, scale and rotate, are used.

First let's take a look at the HTML code, there are two main div in the code, respectively, an and b are transformed using pseudo elements, and the contents of b are b1, b2 and b3 (all declared as block attributes), because more than two cannot be used purely with pseudo elements, so it is faster to express them directly with three block elements.

Next is the CSS, the first to see a, of course, first draw two vertical rectangles, make a pause of icon, here directly use pseudo elements to draw, more special is the "height of 0", because it has been said above, in order to create a "shape transformation", rather than "color fade out", it is necessary to use border-width instead of height (remember to add the transition gradient time).

.a {

Position:absolute

Top:50px

Left:50px

Width:100px

Height:100px

Border-radius:50%

Background:#363

Transition:.2s

}

.a: before,.a:after {

Content: ""

Position:absolute

Width:12px

Height:0

Top:24px

Border-style:solid

Border-width:0 0 54px 0

}

.a: before {

Left:27px

Border-color:#fff rgba (255pr. 255pr. 255pr 0) # fff rgba (255pr. 255pr. 255pr 0)

Transition:.2s

}

.a: after {

Left:54px

Border-color: rgba (255, 255, 255) rgba (255, 255, 255, and 255) # fff # fff

Transition:.2s

}

After the main body is set, then we will set the effect of hover and active. Here we will use scale and rotate of transform. In addition to deformation, take a closer look, the width and border width have changed. Coupled with the mutual collocation of the position, you can easily make two rectangles become triangles when the mouse moves up and square when you click down. (if scale sets two values, they are the deformation ratio of width and length.)

.a: hover:before {

Top:26px

Left:45px

Width:0

Transform:scale (2mai 1.17) rotate (90deg)

Border-width:0 0 24px 24px

}

.a: hover:after {

Top:53px

Left:45px

Width:0

Transform:scale (2mai 1.17) rotate (90deg)

Border-width:0 24px 24px 0

}

.a: hover {

Background:#095

Transition:.4s

}

.a: active:before {

Border-width:0 0 24px 0

Width:22px

Top:26px

Left:38px

Transition:.4s

}

.a: active:after {

Border-width:0 0 24px 0

Width:22px

Top:50px

Left:38px

Transition:.4s

}

.a: active {

Transform:rotate (180deg)

Background:#0a9

}

That's what it looks like.

Then there is another one, the principle is basically the same, but it is much easier without shape transformation, just adjust the angle and length and width!

.b {

Position:absolute

Top:50px

Left:160px

Width:100px

Height:100px

Border-radius:50%

Background:#09c

Transition:.2s

}

.b i {

Position:absolute

Display:block

Width:56px

Height:10px

Background:#fff

Left:22px

Border-radius:2px

Transition:.2s

}

.b1 {

Top:24px

}

.b2 {

Top:44px

}

.b3 {

Top:64px

}

.b: hover .b1 {

Left:15px

Width:70px

Transform:translateY (20px) rotate (45deg)

}

.b: hover .b3 {

Left:15px

Width:70px

Transform:translateY (- 20px) rotate (- 45deg)

}

.b: hover .b2 {

Left:50px

Width:0

}

.b: hover {

Background:#c00

}

.b: active .b1 {

Width:40px

Transform:translateY (11px) rotate (- 45deg)

Transition:.3s

}

.b: active .b3 {

Width:40px

Transform:translateY (- 7px) rotate (45deg)

Transition:.3s

}

.b: active .b2 {

Top:46px

Left:22px

Width:60px

Transition:.3s

}

.b: active {

Transform:rotate (45deg)

Background:#f70

}

Thank you for your reading, the above is the content of "how to use pure CSS Material Design style buttons". After the study of this article, I believe you have a deeper understanding of how to use pure CSS Material Design style buttons, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.