Question

我正在为我的网站制作一个css3悬停效果按钮，但似乎<input>上的效果不起作用。

我想做什么：在这个DEMO上你会看到我想要做的事情：

<button class="some classes">Contact</button>

问题出现在我的联系表单的<input>上，因为它不起作用。

我正在努力解决问题，但我不知道我错过了什么。

DEMO UPDATED ：JSFIDDLE

我应该尝试让表单在没有输入的情况下工作吗？

提前致谢

Answer 1

我认为你必须在不使用<input>元素的情况下完成这项工作。像:before和:after这样的伪元素只能为容器元素呈现，因为它们实际上最终在元素内部。由于<input>不是容器元素，因此只能使用纯CSS来使用此代码。（可能一旦你引入了JavaScript，但我不确定你是否想为按钮效果创造那么多开销。）

如果您想阅读更多信息，请参阅StackOverflow上another question的链接，该链接与您的相同。希望这有帮助！

Answer 2

我做了一些更改（jsfiddle），现在它有效，但除其他事项外，<inputs>必须由<buttons>代替。为什么？由于input元素不能包含子元素，因此不会呈现:after伪元素。除此之外，您还需要为content元素设置position和:after属性：

button[type="submit"]:after {
   content: '';
   position: absolute;
   display: block;
   width: 100%;
   height: 0;
   top: 50%;
   left: 50%;
   background: #fff;
   opacity: 0;
   -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   -moz-transform: translateX(-20%) translateY(-20%) rotate(45deg);
   -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

已编辑要使转换在:after元素中运行：

button[type="submit"]:after {
   content: '';
   position: absolute;
   display: block;
   width: 100%;
   height: 0;
   top: 50%;
   left: 50%;
   background: #fff;
   opacity: 0;
   -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   -moz-transform: translateX(-20%) translateY(-20%) rotate(45deg);
   -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
   transform: translateX(-50%) translateY(-50%) rotate(45deg);
   -webkit-transtion: all 0.3s;
   -moz-transition: all 0.3s;
   transition: all 0.3s;
}

新jsfiddle.

Css3悬停输入按钮

2 个答案: