我正在尝试模拟此处显示的按钮:https://codepen.io/nw/pen/udkIB
我正在尝试将我的动画添加到值按钮中,但不起作用。未显示下载箭头形状和下载nox形状。
这是我的代码:
.buttonDownload {
display: inline-block;
border: none;
position: relative;
padding: 10px 25px;
background-color: #4CC713;
color: white;
font-family: sans-serif;
text-decoration: none;
font-size: 0.9em;
text-align: center;
text-indent: 15px;
}
.buttonDownload:hover {
background-color: #333;
color: white;
}
.buttonDownload:before,
.buttonDownload:after {
content: ' ';
display: block;
position: absolute;
left: 15px;
top: 52%;
}
/* Download box shape */
.buttonDownload:before {
width: 10px;
height: 2px;
border-style: solid;
border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
width: 0;
height: 0;
margin-left: 3px;
margin-top: -7px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: transparent;
border-top-color: inherit;
-webkit-animation: downloadArrow 2s linear infinite;
animation: downloadArrow 2s linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.buttonDownload:hover:before {
border-color: #4CC713;
}
.buttonDownload:hover:after {
border-top-color: #4CC713;
-webkit-animation-play-state: running;
animation-play-state: running;
}
/* keyframes for the download icon anim */
@-webkit-keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
@keyframes downloadArrow {
/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
0% {
margin-top: -7px;
opacity: 1;
}
0.001% {
margin-top: -15px;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
margin-top: 0;
opacity: 0;
}
}
<form action="" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<input type="submit" value="Download" class="buttonDownload">
</form>
:before
和:after
之类的伪元素不适用于任何<input>
元素。在您的链接示例中,它有效,因为它使用了<a>
因此您将不得不替换此HTML:
<input type="submit" value="Download" class="buttonDownload">
带有此:
<button type="submit" class="buttonDownload">Download</button>
您的CSS有效,但定位的是<a>
标签而不是<input>
。将您的HTML更改为此:
<form action="www.indiananimeclan.blogspot. com" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<a href="#" class="buttonDownload">Download</a>
</form>
[Here's a pen,您的CSS不变。