按钮图标

8种CSS3按钮动画特效

创客主机

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

HTML 结构

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

也想出现在这里?联系我们
宝塔
  1. <div class="item button-jittery" style="--bg-color: #f1c40f;">
  2.   <button>Click Me!</button>
  3.   <div class="name">Subtlety</div>
  4. </div>

CSS 样式

  1. * {
  2.   box-sizing: border-box;
  3. }
  4. *:before, *:after {
  5.   content: "";
  6.   position: absolute;
  7. }
  8.  
  9. .main-content {
  10.   display: grid;
  11.   width: 100%;
  12.   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  13. }
  14. .main-content .item {
  15.   display: grid;
  16.   grid-template-rows: 1fr min-content;
  17.   align-items: center;
  18.   justify-content: center;
  19.   height: 50vh;
  20.   flex-wrap: wrap;
  21.   background: var(--bg-color);
  22. }
  23. .main-content .item:not(.footer) {
  24.   padding-top: 1rem;
  25. }
  26.  
  27. button {
  28.   background: transparent;
  29.   color: #fff;
  30.   border: 3px solid #fff;
  31.   border-radius: 50px;
  32.   padding: 0.8rem 2rem;
  33.   font: 24px "Margarine", sans-serif;
  34.   outline: none;
  35.   cursor: pointer;
  36.   position: relative;
  37.   transition: 0.2s ease-in-out;
  38.   letter-spacing: 2px;
  39. }
  40.  
  41. .name {
  42.   width: 100%;
  43.   text-align: center;
  44.   padding: 0 0 3rem;
  45.   font: 500 14px 'Rubik', sans-serif;
  46.   letter-spacing: .5px;
  47.   text-transform: uppercase;
  48.   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  49. }
  50.  
  51. .button__wrapper {
  52.   display: inline-block;
  53.   position: relative;
  54.   width: 200px;
  55.   height: 65px;
  56.   display: flex;
  57.   justify-content: center;
  58.   align-items: center;
  59. }
  60.  
  61. .button-pulse button {
  62.   background: var(--bg-color);
  63.   width: 100%;
  64.   height: 100%;
  65.   position: absolute;
  66.   top: 0;
  67.   left: 0;
  68.   z-index: 2;
  69. }
  70. .button-pulse .button__wrapper:hover .pulsing:before {
  71.   animation: pulsing 0.2s linear infinite;
  72. }
  73. .button-pulse .button__wrapper:hover .pulsing:after {
  74.   animation: pulsing1 0.2s linear infinite;
  75. }
  76.  
  77. .pulsing {
  78.   width: 99%;
  79.   height: 99%;
  80.   border-radius: 50px;
  81.   z-index: 1;
  82.   position: relative;
  83. }
  84. .pulsing:before, .pulsing:after {
  85.   width: 100%;
  86.   height: 100%;
  87.   border: inherit;
  88.   top: 0;
  89.   left: 0;
  90.   z-index: 0;
  91.   background: #fff;
  92.   border-radius: inherit;
  93.   animation: pulsing 2.5s linear infinite;
  94. }
  95. .pulsing:after {
  96.   animation: pulsing1 2.5s linear infinite;
  97. } 
  98. .button-jittery button {
  99.   animation: jittery 4s infinite;
  100. }
  101. .button-jittery button:hover {
  102.   animation: heartbeat 0.2s infinite;
  103. }
  104.  
  105. @keyframes jittery {
  106.   5%,
  107.   50% {
  108.     transform: scale(1);
  109.   }
  110.   10% {
  111.     transform: scale(0.9);
  112.   }
  113.   15% {
  114.     transform: scale(1.15);
  115.   }
  116.   20% {
  117.     transform: scale(1.15) rotate(-5deg);
  118.   }
  119.   25% {
  120.     transform: scale(1.15) rotate(5deg);
  121.   }
  122.   30% {
  123.     transform: scale(1.15) rotate(-3deg);
  124.   }
  125.   35% {
  126.     transform: scale(1.15) rotate(2deg);
  127.   }
  128.   40% {
  129.     transform: scale(1.15) rotate(0);
  130.   }
  131. }
  132. @keyframes heartbeat {
  133.   50% {
  134.     transform: scale(1.1);
  135.   }
  136. }

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

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

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

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!