按钮样式的切换

代码如下：

 <div class=" clearfix insert">
       <div class="pull-left button a1 act"><a style="text-decoration: none" href="gene.html">关于9521</a></div>
       <div class="pull-right button a2"><a style="text-decoration: none" href="gene2.html">加入9521</a></div>
  </div>

 

.banner .insert{
    position: absolute;
    width: 370px;
    text-align: center;
    margin:100px  auto;
    left: 50%;
    top: 40%;
    transform: translate(-50%);
}

.banner .button{
    width: 47%;
    height: 100%;
    font-size: 20px;
    display: block;
    padding: 10px;
    background-color:#fafafa;
}
.banner .button a{
    color: #282828;

}
.banner .button.act{
    background-color: #164a8b;
    color: #eee;
}
.banner .act a{
    color: #eee;
}
.banner .a1{
  transition: all 0.2s;
}
.banner .a2{
    /*color:#000;*/
    transition: all 0.2s;
}
.banner .a1:hover{
    background-color: #164a8b;
}
.banner .button:hover a{
    color: #eee;
}
.banner .a2:hover{
    background-color: #164a8b;
}

切换前：

切换后：

 

用：hover点击效果：

 

来源：CSDN

作者：leo_桃子

链接：https://blog.csdn.net/leo_0629/article/details/81773412