Pure CSS3 achieves milk-like 3D button effects and css3 3d Effects

Pure CSS3 achieves milk-like 3D button effects and css3 3d Effects

Today, let's take a look at a very special pure CSS3 3D button, which looks like pure white and transparent milk. When you click the button, it will also show a very soft elasticity effect. When the button is pressed, the button will gently pop up, very realistic. In this article, we will share the source code and learn it together.

You can also view online demos here

Next, let's analyze the steps and code for implementing this CSS3 3D button. In general, this CSS3 3D button mainly consists of HTML code and CSS code. The implementation principle is to use two spans to replace the checkbox selected and the two States not selected.

HTML code:

<div>    <div>        <input type="checkbox">        <span></span>        <span>+</span>    </div>    <div>        <input type="checkbox" checked>        <span></span>        <span>–</span>    </div></div>

The HTML code is very simple. We can see that two spans are defined under each checkbox. By defining these two span styles, we can simulate the animation effect selected by the checkbox.

The following is the CSS code:

.toggle {  margin: 4px;  display: inline-block;}.toggle {  box-shadow: inset 0 0 35px 5px rgba(0, 0, 0, 0.25), inset 0 2px 1px 1px rgba(255, 255, 255, 0.9), inset 0 -2px 1px 0 rgba(0, 0, 0, 0.25);  border-radius: 8px;  background: #ccd0d4;  position: relative;  height: 140px;  width: 140px;}.toggle:before {  box-shadow: 0 0 17.5px 8.75px white;  border-radius: 118.3px;  background: white;  position: absolute;  margin-left: -50.4px;  margin-top: -50.4px;  opacity: 0.2;  content: "";  height: 100.8px;  width: 100.8px;  left: 50%;  top: 50%;}.toggle .button {  -webkit-filter: blur(1px);  -moz-filter: blur(1px);  filter: blur(1px);  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);  box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5), inset 0 -3px 4px -1px rgba(0, 0, 0, 0.2), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 3px 4px -1px rgba(255, 255, 255, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.8), inset 0 20px 30px 0 rgba(255, 255, 255, 0.2);  border-radius: 96.32px;  position: absolute;  background: #ccd0d4;  margin-left: -48.16px;  margin-top: -48.16px;  display: block;  height: 96.32px;  width: 96.32px;  left: 50%;  top: 50%;}.toggle .label {  transition: color 300ms ease-out;  text-shadow: 1px 1px 3px #ccd0d4, 0 0 0 rgba(0, 0, 0, 0.8), 1px 1px 4px white;  line-height: 139px;  text-align: center;  position: absolute;  font-weight: 700;  font-size: 42px;  display: block;  opacity: 0.9;  height: 100%;  width: 100%;  color: rgba(0, 0, 0, 0.4);}.toggle input {  opacity: 0;  position: absolute;  cursor: pointer;  z-index: 1;  height: 100%;  width: 100%;  left: 0;  top: 0;}.toggle input:active ~ .button {  box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 30px 1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 25px 0 rgba(0, 0, 0, 0.4), inset 0 0 10px 1px rgba(255, 255, 255, 0.6);}.toggle input:active ~ .label {  font-size: 40px;  color: rgba(0, 0, 0, 0.45);}.toggle input:checked ~ .button {  box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.4), inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9), 0 -10px 15px -1px rgba(255, 255, 255, 0.6), inset 0 8px 20px 0 rgba(0, 0, 0, 0.2), inset 0 0 5px 1px rgba(255, 255, 255, 0.6);}.toggle input:checked ~ .label {  font-size: 40px;  color: rgba(0, 0, 0, 0.4);}

There is nothing special about it. It is basically some of the attributes commonly used in CSS3, such as shadow animation. We just choose colors and apply shadow effects reasonably, with pure CSS3, a 3D, milk-like button animation effect is depicted. Source code download>

What do you know about soft ship training?

HTML5/CSS3 is the button special effects that can be used to write web pages. It is very practical. If you don't quite understand it, You can first understand the relationship between htmlhe and css. This is the programming knowledge.

How to Use CSS3 to create a specific style of 3D effect text

Copy the Code as follows :. example-class {text-shadow: [X offset] [Y offset] [Blur size] [Colour];} Note: X indicates the displacement on the X axis and can be a negative value; Y indicates the displacement on the Y axis, which can be a negative value. Blur indicates the projection width, which cannot be a negative value. Color indicates the Projection Color. Stacked multi-layer CSS projection although we do not need to stack multi-layer projection, but through stacked multi-layer projection, there will be a better 3D effect to start creating 3D text. You may choose a color deeper than the text to use as the color of the projection, so in this example, I will use white text, use a deeper gray color as the projection color. In this example, I render the 3D effect of H2 text. The css code is as follows: copy the Code as follows: h2 {text-shadow: 1px 1px 0 # CCC, 2px 2px 0 # CCC,/* end of 2 level deep gray shadow */3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444;/* end of 4 level deep dark shadow */} the effect is as follows: Well, you have created basic 3D text here, however, let's further expand the text that slides over the mouse, and use the transision attribute of css to achieve smooth fade-in and fade-out effects. First, use the transform attribute to zoom in and copy the code: h2: hover {/* CSS3 Transform Effect */-webkit-transform: scale (1.2 ); /* Safari & Chrome */-moz-transform: scale (1.2);/* Firefox */-o-transform: scale (1.2 ); /* Opera */}: Use the transition attribute to implement the fade-in and fade-out Effect. The Code is as follows: h2 {/* CSS3 Transition Effect */-webkit-transition: all 0.12 s outgoing-out;/* Safari & Chrome */-moz-transition: all 0.12 s outgoing-out;/* Firefox */-o-transition: all 0.12 S between-out;/* Opera */} Here, we use CSS3 to implement the 3D effect of the text, and when the mouse slides over, it enables the font to zoom in, and there is a fade-in and fade-out effect, all of which are implemented with pure CSS.