时间戳

首页 > 解决方案 > 动画提交按钮

css - 动画提交按钮

问题描述

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

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

标签： cssanimationinputsubmit

解决方案

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

推荐阅读