炫酷企业建站作品展示WordPress中文模板

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

按钮图标

首页 _ 全部文章 _ Code/特效 _ 按钮图标 _ 正文

8种CSS3按钮动画特效

PetitQ 按钮图标 2019-4-08 3.76K 0 4

收藏

阿里云

这是一款 CSS3 按钮动画特效。在该特效中，提供了 8 种按钮动画特效。每种特效在鼠标悬停到按钮上面的时候，都会触发按钮动画。

HTML 结构

最简单的按钮 HTML 结构如下。

也想出现在这里？联系我们吧

创客主机

<div class="item button-jittery" style="--bg-color: #f1c40f;">

```
  <button>Click Me!</button>
```
```
  <div class="name">Subtlety</div>
```
```
</div>
```

CSS 样式

```
* {
```
```
  box-sizing: border-box;
```
```
}
```
```
*:before, *:after {
```
```
  content: "";
```
```
  position: absolute;
```
```
}
```
```
 
```
```
.main-content {
```
```
  display: grid;
```
```
  width: 100%;
```

  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

```
}
```
```
.main-content .item {
```
```
  display: grid;
```
```
  grid-template-rows: 1fr min-content;
```
```
  align-items: center;
```
```
  justify-content: center;
```
```
  height: 50vh;
```
```
  flex-wrap: wrap;
```
```
  background: var(--bg-color);
```
```
}
```
```
.main-content .item:not(.footer) {
```
```
  padding-top: 1rem;
```
```
}
```
```
 
```
```
button {
```
```
  background: transparent;
```
```
  color: #fff;
```
```
  border: 3px solid #fff;
```
```
  border-radius: 50px;
```
```
  padding: 0.8rem 2rem;
```
```
  font: 24px "Margarine", sans-serif;
```
```
  outline: none;
```
```
  cursor: pointer;
```
```
  position: relative;
```
```
  transition: 0.2s ease-in-out;
```
```
  letter-spacing: 2px;
```
```
}
```
```
 
```
```
.name {
```
```
  width: 100%;
```
```
  text-align: center;
```
```
  padding: 0 0 3rem;
```
```
  font: 500 14px 'Rubik', sans-serif;
```
```
  letter-spacing: .5px;
```
```
  text-transform: uppercase;
```

  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);

```
}
```
```
 
```
```
.button__wrapper {
```
```
  display: inline-block;
```
```
  position: relative;
```
```
  width: 200px;
```
```
  height: 65px;
```
```
  display: flex;
```
```
  justify-content: center;
```
```
  align-items: center;
```
```
}
```
```
 
```
```
.button-pulse button {
```
```
  background: var(--bg-color);
```
```
  width: 100%;
```
```
  height: 100%;
```
```
  position: absolute;
```
```
  top: 0;
```
```
  left: 0;
```
```
  z-index: 2;
```
```
}
```

.button-pulse .button__wrapper:hover .pulsing:before {

  animation: pulsing 0.2s linear infinite;

```
}
```

.button-pulse .button__wrapper:hover .pulsing:after {

  animation: pulsing1 0.2s linear infinite;

```
}
```
```
 
```
```
.pulsing {
```
```
  width: 99%;
```
```
  height: 99%;
```
```
  border-radius: 50px;
```
```
  z-index: 1;
```
```
  position: relative;
```
```
}
```
```
.pulsing:before, .pulsing:after {
```
```
  width: 100%;
```
```
  height: 100%;
```
```
  border: inherit;
```
```
  top: 0;
```
```
  left: 0;
```
```
  z-index: 0;
```
```
  background: #fff;
```
```
  border-radius: inherit;
```

  animation: pulsing 2.5s linear infinite;

```
}
```
```
.pulsing:after {
```

  animation: pulsing1 2.5s linear infinite;

```
} 
```
```
.button-jittery button {
```
```
  animation: jittery 4s infinite;
```
```
}
```
```
.button-jittery button:hover {
```
```
  animation: heartbeat 0.2s infinite;
```
```
}
```
```
 
```
```
@keyframes jittery {
```
```
  5%,
```
```
  50% {
```
```
    transform: scale(1);
```
```
  }
```
```
  10% {
```
```
    transform: scale(0.9);
```
```
  }
```
```
  15% {
```
```
    transform: scale(1.15);
```
```
  }
```
```
  20% {
```

    transform: scale(1.15) rotate(-5deg);

```
  }
```
```
  25% {
```

    transform: scale(1.15) rotate(5deg);

```
  }
```
```
  30% {
```

    transform: scale(1.15) rotate(-3deg);

```
  }
```
```
  35% {
```

    transform: scale(1.15) rotate(2deg);

```
  }
```
```
  40% {
```
```
    transform: scale(1.15) rotate(0);
```
```
  }
```
```
}
```
```
@keyframes heartbeat {
```
```
  50% {
```
```
    transform: scale(1.1);
```
```
  }
```
```
}
```

Codepen 网址：https://codepen.io/oliviale/pen/vPvvyr

8 种 CSS3 按钮动画特效

已有 939 人购买

永久更新：
演示数据：
提取码：w5r9

1

查看演示升级 VIP 立刻购买

演示地址

下载地址

也想出现在这里？联系我们吧

创客云

带自动提示功能的jQuery标签输入插件

多种炫酷js鼠标跟随动画特效插件

相关文章

简单的纯js滑动按钮插件

按钮图标 6 年前 2.03K
基于SVG的鼠标滑过按钮产生边框动画网页特效

按钮图标 3 年前 949
纯CSS3动感手风琴列表UI界面设计

布局框架, 按钮图标 6 年前 1.73K

发表回复取消回复

要发表评论，您必须先登录。

流年似水

今日已经过去0小时

0%

这周已经过去0天

0%

本月已经过去0天

0%

今年已经过去0个月

0%

热门文章

Mac - 全屏摄影艺术相册展示模板WordPress中文主题

Mac - 全屏摄影艺术相册展示模板WordPress中文主题

原版主题 6 年前 5.76K

Mac - 全屏摄影艺术相册展示模板WordPress主题，该主题适合那些从事摄影，绘画或数字图形艺术家…

VideoPro - 专业视频网站电影网站WordPress主题

VideoPro - 专业视频网站电影网站WordPress主题

原版主题 8 年前 1.42W

VideoPro是最强大的视频网站WordPress主题。基于市场上最大的视频True Mag主题，Vi…

Elessi - AJAX电商网站模板WordPress主题

Elessi - AJAX电商网站模板WordPress主题

原版主题 5 年前 4.19K

可以使用Option Framework轻松定制Elessi，它具有通过SMOF强大的主题选项面板。该主…

Bronx - 时尚服饰购物商城网站WordPress主题

Bronx - 时尚服饰购物商城网站WordPress主题

原版主题, 汉化主题 8 年前 7.60K

Bronx WordPress深度汉化版是一款独特的Wordpress电商主题。自适应，Retina 支…

DUX-PRO创客云开发版WordPerss中文主题

DUX-PRO创客云开发版WordPerss中文主题

原版主题 10 年前 2.85W

DUX-PRO创客科技美化专业版WordPerss主题企业博客模板，此模板为创客独家二次开发，HTML5…

点击签到领取积分可下载全站资源！

今日签到

连续签到

Canice

12小时前

297
shboxy

13小时前

570
宁คิดถึง

16小时前

131
onlisai

18小时前

96
S.

3天前

70

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题

LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！