html hover 显示按钮,纯css按钮hover效果

最新推荐文章于 2025-03-10 08:45:00 发布

weixin_39876645

最新推荐文章于 2025-03-10 08:45:00 发布

阅读量1.1k

点赞数

文章标签： html hover 显示按钮

* {

margin:0;

padding:0;

}

button {

margin:30px 20px;

padding:15px 20px;

border-radius:10px;

border:2px solid;

font:16px 'Open Sans',sans-serif;

text-transform:uppercase;

background:none;

outline:none;

cursor:pointer;

-webkit-transition:all .5s;

transition:all .5s;

}

.btn1 {

color:#A3F7BF;

border-color:#A3F7BF;

background:-webkit-linear-gradient(left,#a3f7bf,#a3f7bf) no-repeat;

background:linear-gradient(to right,#a3f7bf,#a3f7bf) no-repeat;

background-size:0% 100%;

}

.btn1:hover {

background-size:100% 100%;

color:#27323A;

}

.btn2 {

color:#A3F7BF;

border-color:#A3F7BF;

background:-webkit-linear-gradient(left,#a3f7bf,#a3f7bf) no-repeat;

background:linear-gradient(to right,#a3f7bf,#a3f7bf) no-repeat;

background-size:100% 0%;

}

.btn2:hover {

background-size:100% 100%;

color:#27323A;

}

.btn3 {

color:#FFD460;

border-color:#FFD460;

position:relative;

overflow:hidden;

}

.btn3:before {

content:"";

position:absolute;

top:0;

right:-5px;

width:0;

height:100%;

background-color:#FFD460;

z-index:-1;

-webkit-transition:all .5s;

transition:all .5s;

}

.btn3:hover {

color:#27323A;

}

.btn3:hover:before {

width:110%;

}

.btn4 {

color:#FFD460;

border-color:#FFD460;

position:relative;

overflow:hidden;

}

.btn4:before {

content:"";

position:absolute;

top:0;

left:-5px;

width:0;

height:100%;

background-color:#FFD460;

z-index:-1;

-webkit-transition:all .5s;

transition:all .5s;

}

.btn4:after {

content:"";

position:absolute;

top:0;

right:-5px;

width:0;

height:100%;

background-color:#FFD460;

z-index:-1;

-webkit-transition:all .5s;

transition:all .5s;

}

.btn4:hover {

color:blue;

}

.btn4:hover:before {

width:60%;

}

.btn4:hover:after {

width:60%;

}

.btn5 {

color:#FFD460;

border-color:#FFD460;

position:relative;

overflow:hidden;

}

.btn5:after {

content:"";

position:absolute;

top:50%;

left:0%;

transform:translateY(-50%);

width:100%;

height:0%;

background-color:#FFD460;

z-index:-1;

-webkit-transition:all .5s;

transition:all .5s;

}

.btn5:hover {

color:#FF0000;

}

.btn5:hover:after {

height:110%;

}

.btn6 {

color:burlywood;

border-color:orangered;

position:relative;

overflow:hidden;

}

.btn6:after {

content:"";

display:block;

position:absolute;

top:-38px;

left:-35px;

width:110%;

height:125%;

background:#0000FF;

transform:rotate(-45deg) translateY(-70%);

transition:all .5s;

z-index:-1;

}

.btn6:before {

content:"";

display:block;

position:absolute;

top:15px;

right:-30px;

width:110%;

height:125%;

background:#0000FF;

transform:rotate(-45deg) translateY(100%);

transition:all .5s;

z-index:-1;

}

.btn6:hover {

color:#fff;

}

.btn6:hover:after {

transform:rotate(-45deg) translateY(15%);

}

.btn6:hover:before {

transform:rotate(-45deg) translateY(-7%);

}