html按钮悬浮效果,css3按钮悬浮效果a {
text-decoration:none
}
body {
margin:0;
padding:0;
width:100%;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
font-family:Raleway;
background-color:#ecf0f1;
}
.copyright {
position:absolute;
bottom:0;
}
.copyright a {
text-decoration:none;
color:#16a085;
}
.copyright a:hover {
text-decoration:underline;
}
.button {
position:relative;
padding:1em 1.5em;
border:none;
background-color:transparent;
cursor:pointer;
outline:none;
font-size:18px;
margin:1em 0.8em;
}
.pe1 {
color:#566473;
}
.pe1::after,.pe1::before { content:"";
display:block;
position:absolute;
width:20%;
height:20%;
border:2px solid;
transition:all 0.6s ease;
htmlbutton属性border-radius:2px;
}
.pe1::after {
bottom:0;
right:0;
border-top-color:transparent;
border-left-color:transparent;
border-bottom-color:#566473;
border-right-color:#566473;
}
.pe1::before {
top:0;
left:0;
border-bottom-color:transparent;
border-right-color:transparent;
border-top-color:#566473;
border-left-color:#566473;
}
.pe1:hover:after,.pe1:hover:before { width:100%;
height:100%;
}
.pe2 {
color:#16a085;
}
.pe2:after,.pe2:before { content:"";
display:block;
position:absolute;
top:100%;
left:0;
width:100%;
height:2px;
background-color:#16a085;
transition:all 0.3s ease;
transform:scale(0.85);
}
.pe2:hover:before {
top:0;
transform:scale(1);
}
.pe2:hover:after {
transform:scale(1);
}
.
color:#435a6b;
}
.pe3::after,.pe3::before { content:"";
display:block;
position:absolute;
width:20%;
height:20%;
border:2px solid;
transition:all 0.6s ease;
border-radius:2px;
}
.pe3::after {
bottom:0;
right:0;
border-top-color:transparent;
border-left-color:transparent;
border-bottom-color:#435a6b;
border-right-color:#435a6b;
}
.pe3::before {
top:0;
left:0;
border-bottom-color:transparent;
border-right-color:transparent;
border-top-color:#435a6b;
border-left-color:#435a6b;
}
.pe3:hover:after,.pe3:hover:before { border-bottom-color:#435a6b;
border-right-color:#435a6b;
border-top-color:#435a6b;
border-left-color:#435a6b;
width:100%;
height:100%;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。