网站前端制作之鼠标经过按钮效果二

速优网络（10年经验），服务数万家企业，固定透明报价。域名注册、主机/服务器、网站源码一站式服务。实体公司，专业团队，值得选择！建站业务：企业网站建设、公司官网制作、外贸网站建设、网站仿制、网站复制、仿站、外贸建站、单页扒站客服微信【suyoufuwu】

接着上次关于页面布局中，内容模块里的按钮，鼠标经过的动画效果的总结。鼠标经过的按钮的时候会触发各种效果，如渐变、放大、旋转抑或是翻转等效果。
开始的按钮样式，如下图

前端效果1

鼠标移入最终的效果

前端效果2

动态效果三：
Html

了解更多

Css
.xbtn1 a{
position: relative;
    display: block;
    margin: 20px auto;
    width: 100%;
    height: 50px;
    line-height: 50px;
    max-width: 150px;
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
    border: 1px solid currentColor;
    color: #FFFFFF;
}
.xbtn1 a:after{
content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    -webkit-transition: 0.5s;
     transition: 0.5s;
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: #FFFFFF transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.xbtn1 a:hover:after {
    border-width: 330px 330px 0 0;
}
.xbtn1 a:hover{
color: #1b3952;
}
动态效果四：
Html

了解更多

Css
.xbtn2 a{
position: relative;
    display: block;
    margin: 20px auto;
    width: 100%;
    height: 50px;
    line-height: 50px;
    max-width: 150px;
    text-align: center;
    text-transform: uppercase;
    overflow: hidden;
    border: 1px solid currentColor;
}
.xbtn2 a:before{
content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    -webkit-transition: 0.5s;
     transition: 0.5s;
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent transparent #1b3952;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.xbtn2 a:after{
content: '';
    width: 0;
    height: 0;
    -webkit-transform: rotate(360deg);
    -webkit-transition: 0.5s;
     transition: 0.5s;
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent transparent #1b3952 transparent;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.xbtn2 a:hover {
    color: #FFFFFF;
}
.xbtn2 a:hover:before {
    border-width: 150px 0 0 150px;
}
.xbtn2 a:hover:after {
    border-width: 0 0 150px 150px;
}
接下来动态效果五，这种动态效果是鼠标移入，出现背景和水波纹的效果，如下图是最开始的样式，关于分享的图标是用切了颜色不一样的两张图标，一张是白色，一张是黑色，黑色图标是输入移入之后的效果，图标的背景变白色，周围出现的波纹，主要用伪类实现的。

前端效果3

下面是鼠标移入的效果

前端效果4

Html

下面关于样式有点多，主要的样式是关于伪类做的波纹

前端效果5

前端效果6

前端效果7

以上就是速优网络和大家分享的"网站前端制作之鼠标经过按钮效果二",非常感谢您有耐心的读完这篇文章，我们将为您提供更多参考使用或学习交流的信息。我们还可为您提供：企业网站建设、网站仿制、网站复制、仿站、外贸网站建设、外贸建站、公司官网制作等服务，本公司以“诚信、专业、务实、创新”的服务理念服务于客户。如您需要合作，请扫码咨询，我们将诚挚为您服务。

TAG标签：

上一篇：想要为成下一个网红？新媒体该如何利用发展

下一篇：如何做一个“好”网站