CODEWITHSUNDEEP
htmlcssanimation
John
John

Reputation: 257

Bounceing button

I'm trying to create a button with a bouncing effect but don't want the text to bounce. I wanted to bounce only red container and text to stay static. Here what I try.

  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>

Upvotes: 0

Views: 67

Answers (1)

Oğuzhan Atalay
Oğuzhan Atalay

Reputation: 180

Here is the best simple way.

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>

Upvotes: 1

Related Questions