HTML手机点击按钮会变形,HTML5一款会变形的订阅按钮

CSS

语言：

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

body {

background: #21CDB2;

}

.wrap {

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

.wrap div {

display: flex;

justify-content: center;

align-items: center;

margin: 8px;

}

.parent {

position: relative;

}

.parent .sub {

transition: all 0.5s ease-in-out;

}

.parent .thanks {

font-size: 13px;

transition: all 0.5s ease-in-out;

position: absolute;

top: -5px;

left: 0;

opacity: 0;

}

.text {

font-size: 17px;

color: #F5F5F5;

font-family: 'Open Sans', sans-serif;

letter-spacing: 2px;

text-transform: uppercase;

transition: all 0.5s ease-in-out;

}

#toggle {

display: none;

}

.button {

position: absolute;

z-index: 999;

width: 28px;

height: 28px;

background: #F9F9F9;

border-radius: 10%;

transition: all 0.5s ease-in-out;

cursor: pointer;

}

.button:before {

position: absolute;

top: 13px;

left: 6px;

content: '';

width: 16px;

height: 2px;

background: #21CDB2;

transform: rotate(90deg);

}

.button:after {

position: absolute;

top: 13px;

left: 6px;

content: '';

width: 16px;

height: 2px;

background: #21CDB2;

}

#toggle:checked ~ .nav {

opacity: 1;

transform: translateY(10%);

}

#toggle:checked ~ .button {

transform: rotate(135deg);

box-shadow: 0 0 0 0 transparent;

border-radius: 100%;

}

#toggle:checked ~ .subbed {

opacity: 1;

}