анимированная кнопка отправки - PullRequest
Новая
       29

анимированная кнопка отправки

0 голосов
/ 04 июня 2018

Можно ли создать такие эффекты, как в приведенной ниже ссылке, используя input[type="submit"]?Я знаю, что не могу использовать input[type="submit"]:after.

Ссылка: https://codepen.io/sazzad/pen/yNNNJG

1 Ответ

0 голосов
/ 04 июня 2018

вы можете использовать градиент и анимацию background-size и / или background-position: 

input[type="submit"] {
  border:2px solid pink;
  padding:5px 20px;
  font-size:30px;
  background:linear-gradient(pink,pink) center/100% 0px no-repeat;
  transition:0.5s all linear;
}
input[type="submit"]:hover {
  background-size:100% 100%;
}
<input type="submit" value="submit" >

Другой пример: 

input[type="submit"] {
  border:2px solid pink;
  padding:5px 20px;
  font-size:30px;
  background:repeating-linear-gradient(to right,pink 0,pink 4px,transparent 4px, transparent 8px) center/0px 100%  no-repeat;
  transition:0.5s all linear;
}
input[type="submit"]:hover {
  background-size:100% 100%;
}
<input type="submit" value="submit" >
...