3D three-dimensional CSS3 elastic button implementation code

This is a very good pure CSS3 button animation, this CSS3 button is characterized by a 3D stereoscopic visual effect, and the button is flexible, click the button when it is very textured. Especially in the background, the button is more crystal clear, three-dimensional more intense. Another feature of this button is the full use of CSS3 to animate, and the simple principle is simply to use the CSS3 to re-render the checkbox.

HTML code:

<p class= "container" ><p class= "toggle" ><input type= "checkbox" ><span class= "button" ></ Span><span class= "label" >+</span></p><p class= "toggle" ><input type= "checkbox" Checked><span class= "button" ></span><span class= "label" >–</span></p></p>

CSS Code

. container {text-align:center;  Position:absolute;  Margin-top: -80px;  width:100%; top:50%;}.  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;  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, 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, 2 (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, 2 55, 255, 0.6);}.  Toggle input:checked ~. label {font-size:40px; Color:rgba (0, 0, 0, 0.4);}