利用纯CSS3制作的5组不同风格的按钮悬停动画效果


按钮是一个网站中必备的一个组件,在CSS3之前,大都是通过图片来代替按钮动画的效果。而如今CSS3已经足够强大,本身就能够实现非常之多的特效。利用纯CSS3制作网页中的组件也已经越来越方便和强大。

演示图片

那么今天,我就给大家带来了5组由纯CSS3制作的按钮悬停效果风格,而且每组按钮还有5种不同的颜色,当然这些颜色你都可以自定义。基本上可以满足不同网站不同风格的配置要求,然后你可以尝试复制主要的代码部分,也可以在文章的最下方下载完整的演示文件压缩包。

在线预览地址

https://demo.shaosiming.net/Buttoneffects/index.html

Html 代码部分

<div class="button-ssm-btn">
    <h2>按钮类型 1 </h2>
    <a class="ssm-btn ssm-btn-1" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-1" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-1" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-1" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-1" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
</div>

<div class="button-ssm-btn">
    <h2>按钮类型 2 </h2>
    <a class="ssm-btn ssm-btn-2" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-2" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-2" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-2" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-2" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
</div>

<div class="button-ssm-btn">
    <h2>按钮类型 3 </h2>
    <a class="ssm-btn ssm-btn-3" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-3" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-3" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-3" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-3" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
</div>

<div class="button-ssm-btn">
    <h2>按钮类型 4 </h2>
    <a class="ssm-btn ssm-btn-4" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-4" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-4" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-4" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-4" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
</div>

<div class="button-ssm-btn">
    <h2>按钮类型 5 </h2>
    <a class="ssm-btn ssm-btn-5" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-5" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-5" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-5" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
    <a class="ssm-btn ssm-btn-5" href="https://www.shaosiming.net" title="演示按钮">演示按钮</a>
</div>

Css代码部分

.ssm-btn {
    text-align: center;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #fff;
    text-transform: capitalize;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    padding: 20px 0px;
    width: 150px;
    border-radius: 6px;
    overflow: hidden;
}

.ssm-btn.ssm-btn-1 {
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}

.ssm-btn.ssm-btn-1:before {
    content: "\f178";
    font-family: FontAwesome;
    font-size: 15px;
    position: absolute;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    right: 0;
    top: 0;
    opacity: 0;
    height: 100%;
    width: 40px;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}

.ssm-btn.ssm-btn-1:hover {
    text-indent: -20px;
}

.ssm-btn.ssm-btn-1:hover:before {
    opacity: 1;
    text-indent: 0px;
}

.ssm-btn.ssm-btn-2 {
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}

.ssm-btn.ssm-btn-2:before {
    content: "\f0a4";
    font-family: FontAwesome;
    font-size: 15px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: -30px;
    width: 30px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 0px 6px 6px 0px;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
    text-align: center;
}

.ssm-btn.ssm-btn-2:hover {
    text-indent: -30px;
}

.ssm-btn.ssm-btn-2:hover:before {
    right: 0;
    text-indent: 0px;
}

.ssm-btn.ssm-btn-3 {
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}

.ssm-btn.ssm-btn-3:before {
    content: "\f178";
    font-family: FontAwesome;
    position: absolute;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 30px;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}

.ssm-btn.ssm-btn-3:hover {
    text-indent: -9999px;
}

.ssm-btn.ssm-btn-3:hover:before {
    top: 0;
    text-indent: 0;
}

.ssm-btn.ssm-btn-4 {
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}

.ssm-btn.ssm-btn-4:before {
    content: "\f178";
    font-family: FontAwesome;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 30px;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}

.ssm-btn.ssm-btn-4:hover {
    text-indent: -9999px;
}

.ssm-btn.ssm-btn-4:hover:before {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    text-indent: 0;
}

.ssm-btn.ssm-btn-5 {
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}

.ssm-btn.ssm-btn-5:before {
    content: "\f054";
    font-family: FontAwesome;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0px;
    height: 100%;
    width: 30px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 0 50% 50% 0;
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}

.ssm-btn.ssm-btn-5:hover {
    text-indent: 30px;
}

.ssm-btn.ssm-btn-5:hover:before {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    text-indent: 0;

下载地址

本站CDN加速下载



版权声明

本文作者 软软软三岁哟 / 文章来源: 少司命个人博客

本文链接https://www.shaosiming.net/jskz/html5css3/11.html

转载分享:如果你要转载或者分享本篇文章,请注明作者/出处以及原文链接即可!

侵权行为:如果文章内容侵犯了您的权益,还请麻烦来信告知删除内容。


发表评论

检测到您还未登录,需要登录后才能发表评论!

注册 or 登录

文章评论 0 条评论,你也快来参与吧!

还没有评论呢~快来一鸣惊人吧!

博主业务范围

- Job requirements accepted by bloggers -

img

- 网站建设 -

提供一站式建站服务
服务器/域名/程序/备案全包

联系博主
img

- 布局调整 -

优化CSS构架布局
主要针对前端页面美化

联系博主
img

- 模板制作 -

图转HTML/仿站/原创
支持套入市场主流程序

联系博主
img

- 定制服务 -

提供私人专项定制服务
疑难杂症问题解决

联系博主