html页面确认按钮浮动,html的浮动按钮

最终达到的效果图：

代码实现：

Document

.checkbox {

position: relative;

display: inline-block;

}

.checkbox:after, .checkbox:before {

font-family: FontAwesome;

-webkit-font-feature-settings: normal;

-moz-font-feature-settings: normal;

font-feature-settings: normal;

-webkit-font-kerning: auto;

-moz-font-kerning: auto;

font-kerning: auto;

-webkit-font-language-override: normal;

-moz-font-language-override: normal;

font-language-override: normal;

font-stretch: normal;

font-style: normal;

font-synthesis: weight style;

font-variant: normal;

font-weight: normal;

text-rendering: auto;

}

.checkbox label {

width: 90px;

height: 42px;

background: #ccc;

position: relative;

display: inline-block;

border-radius: 46px;

-webkit-transition: 0.4s;

transition: 0.4s;

}

.checkbox label:after {

content: '';

position: absolute;

width: 50px;

height: 50px;

border-radius: 100%;

left: 0;

top: -5px;

z-index: 2;

background: #fff;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

-webkit-transition: 0.4s;

transition: 0.4s;

}

.checkbox input {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

z-index: 5;

opacity: 0;

cursor: pointer;

}

.checkbox input:hover + label:after {

box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);

}

.checkbox input:checked + label:after {

left: 40px;

}

.model-1 .checkbox input:checked + label {

background: #376ecb;

}

.model-1 .checkbox input:checked + label:after {

background: #4285F4;

}