html5 active没效果,HTML5+CSS3从入门到精通之纯CSS3实现按钮的 hover 和 active 时颜色的明暗变化效果...

本篇文章探讨了HTML5+CSS3从入门到精通之纯CSS3实现按钮的 hover 和 active 时颜色的明暗变化效果，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

<

效果：在任意HTML标签上增加样式类 f-color-control 就可以为此元素增加hover和avtive时颜色的变化;

代码如下：

Title

.btn{

width: 80px;

line-height: 30px;

cursor:pointer;

padding: 12px;

text-align: center;

font-size: 20px;

color: #fff;

}

.f-color-control{

transform: scale(1);

border-radius:6px;

background-color: #ff6700;

}

.f-color-control:before{

position: absolute;

top: 0;  right: 0;  bottom: 0;  left: 0;

z-index:-1;

border-radius:6px;

background:rgba(0,0,0,.1);

}

.f-color-control:after{

position: absolute;

top: 0; right: 0; bottom: 0; left: 0;

z-index:-1;

border-radius:6px;

background:rgba(255,255,255,.3);

}

.f-color-control:hover:before{

content:"";

}

.f-color-control:active:after{

content:"";

}

登录

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！