时间戳

首页 > 解决方案 > 弹跳按钮

html - 弹跳按钮

问题描述

我正在尝试创建一个具有弹跳效果的按钮，但不希望文本弹跳。我只想反弹红色容器和文本以保持静止。这是我尝试的。

  button {
    width: 240px;

    color: var(--background-color-1);
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;

    position: absolute;
    top: 19vw;
    left: 50%;
  
    background: red;
    border: none;
    backface-visibility: hidden;
    
    padding: 16px 12px;
    transition: all .3s;
    filter: drop-shadow(0 0 15px yellow);
    animation: bounce 1s infinite alternate;
  }  
 
@keyframes bounce {
   to { 
       transform: scale(1.1); 
       filter: drop-shadow(0 0 0 yellow);
    }
}
<button>Button Name</button>

标签： htmlcssanimation

解决方案

这是最好的简单方法。

button {
    width: 240px;

    color: var(--background-color-1);
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;

    position: absolute;
    top: 19vw;
    left: 50%;
  
    border: none;
    backface-visibility: hidden;
    
    padding: 16px 12px;
    z-index: 1;
}
button:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: red;
    transition: all .3s;
    filter: drop-shadow(0 0 15px yellow);
    animation: bounce 1s infinite alternate;
    position: inherit;
    top: 0;
    left: 0;
    z-index: -1;
}
 
@keyframes bounce {
   to { 
       transform: scale(1.1); 
       filter: drop-shadow(0 0 0 yellow);
    }
}
    
<button>Button Name</button>

推荐阅读