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" >

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50687682

复制

相似问题

问动画提交按钮
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动画提交按钮EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动画提交按钮
EN