There is such a button with animation, which is located inside the div kor

#kor { color: #343424; display: block; background: url('https://i.stack.imgur.com/W2pe2.jpg'); background-repeat: no-repeat; padding: 21px 0 21px 20px; border-radius: 18px; } .cat{ text-align: center; margin-bottom: 15px; font-size: 18px; background-color: #029e40; width: 185px; color: red; padding: 8px 0; position: relative; border-radius: 3px; overflow: hidden; background: -webkit-repeating-linear-gradient( 45deg,#029e40,#029e40 10px,#02AA43 10px,#02AA43 20px ); background: repeating-linear-gradient( 45deg,#029e40,#029e40 10px,#02AA43 10px,#02AA43 20px ); } .cat::before { animation: 2s ease-in-out 0s normal none infinite running pulse-bed; background-color: #f00; border-radius: 100%; bottom: -870px; content: ""; display: block; height: 130px; left: -130px; margin: auto; opacity: 0.3; position: absolute; top: -870px; width: 500px; } 
 <div id="kor"> <a class="cat" herf="#">добавить в корзину</a> </div> 

The animation goes beyond the edges of diva kor, I can not figure out how to make it just the size of a diva. here is the knokpi background image enter image description here

  • Can you make the code executable? - Vadim Ovchinnikov
  • your css is different from the html content, make the example executable - user33274

0