动画提交按钮

Question

是否可以使用input[type="submit"]创建此类效果，如下面的链接？我知道我不能使用input[type="submit"]:after。

链接：https://codepen.io/sazzad/pen/yNNNJG

Answer 1

您可以使用渐变和动画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" >