动画提交按钮

Question

有没有一种方法可以使用 input[type="submit"] 来创建像下面 link 中那样的效果？我知道我不能使用 input[type="submit"]:after.

link：https://codepen.io/sazzad/pen/yNNNJG

Answer 1

你可以使用渐变和动画 background-size and/or 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" >

动画提交按钮

animated submit button

css

animation

input

submit