鼠标悬停与点击效果

来源：互联网发布：网络暴力项目编辑：程序博客网时间：2024/05/18 13:10

html代码

正常效果

点击效果

<a class="btn-v2  short-full-screen-v2 btn-none-v2" href="#"><i class="icon-short-full-screen" style="margin-left: 5px;"></i>全屏</a>

css代码

字体相应效果

.btn-v2:hover,.btn-v2:active,.btn-v2:focus{background-color: #369327;text-decoration: none;border: 1px solid #369327;}

.short-full-screen-v2{color:#666666;padding-right: 8px;padding-left: 0px;}

.btn-none-v2{background-color:#ffffff;border-color: #DCDCDC;color: #666666;padding:5px 10px;}.btn-none-v2:hover{background-color:#02B300;color: #ffffff;text-decoration: none;border: 1px solid #02B300;}.btn-none-v2:focus{background-color:#02B300;color: #ffffff;text-decoration: none;border: 1px solid #02B300;}

图片相应效果

.btn-v2 .icon-short-full-screen{background-position: -360px -654px;padding:1px 6px;}.btn-v2:hover .icon-short-full-screen{background-position: -360px -725px;}.btn-v2:focus .icon-short-full-screen{background-position: -360px -725px;}

0 0