Pure CSS3 realizes milk-like 3D button effects

Today we are going to see a very special pure CSS3 3D button, it looks like pure white and clear milk, when you click the button will also appear a very soft stretch effect. When the button is pressed, the button will flick lightly, very lifelike. In this article, we will share the source code and learn it together while watching the demo.

You can also view the online demo here

Let's look at the steps to implement this CSS3 3D button and its code, which, in general, consists of the CSS3 3D button, which is mainly composed of HTML code and CSS code. The implementation principle is to use two spans to replace the checkbox and uncheck the two-state style.

HTML code:

<Div>    <Div>        <inputtype= "checkbox">        <span></span>        <span>+</span>    </Div>    <Div>        <inputtype= "checkbox"checked>        <span></span>        <span>–</span>    </Div></Div>

The HTML code is simple, and we can see that 2 spans are defined below each checkbox, and by defining the two span styles, we can simulate the animated effect of the checkbox selection.

Next 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 1  PX 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; PositionAbsolute  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, 25 5, 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), INS ET 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);}

Also nothing special, basically are CSS3 commonly used some properties, shadow animation What, we just through the selection of colors, and reasonable use of shadow effects, just use pure CSS3 to depict a 3D three-dimensional, such as the milk-like clear button animation effect. source code download >>