Анимированный border css

.simple__button { margin-top: -9px; display: inline-block; padding: 0px 5px; background: #000; border-radius: 10px; height: 47px; min-width: 107px; text-align: center; } .sb__ { color: #fff; cursor: pointer; margin-top: 3px; font-size: 17px; padding: 7px 16px; text-transform: uppercase; text-align: center; border: 2px dashed #89cac0; height: 22px; min-width: 105px; display: inline-block; border-radius: 7px; }

Это текст!

Как реализовать анимированный "бегающий" border. Как сделать чтобы этот border двигался по кругу(прямоугольнику)?

Ответ

Держи через animation
@keyframes marching-ants { 0% { background-position: 0 0, 10px 100%, 0 10px, 100% 0; } 100% { background-position: 10px 0, 0 100%, 0 0, 100% 10px; } } .simple__button { display: inline-block; padding: 0px 5px; background: #000; border-radius: 10px; height: 47px; min-width: 107px; } .sb__ { color: #fff; cursor: pointer; margin-top: 6px; font-size: 17px; padding: 7px 16px; text-transform: uppercase; text-align: center; height: 22px; min-width: 105px; display: inline-block; border-radius: 7px; background-image: linear-gradient(90deg, #89cac0 50%, transparent 50%), linear-gradient(90deg, #89cac0 50%, transparent 50%), linear-gradient(0, #89cac0 50%, transparent 50%), linear-gradient(0, #89cac0 50%, transparent 50%); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 10px 2px, 10px 2px, 2px 10px, 2px 10px; animation: marching-ants 400ms infinite linear; }

Это текст!