在按钮旁边添加一个向下箭头

时间:2016-12-20 16:45:33

标签: html css wordpress button pseudo-element

在我的wordpress网站上,我想在我的加载更多帖子按钮旁边添加一个向下箭头。我希望箭头看起来像一个颠倒的箭头。我的加载更多按钮是通过插件(https://wordpress.org/plugins/easy-load-more/installation/)控制的。所以我对它没有很多控制权。 enter image description here

我尝试通过伪元素添加向下箭头。但是那没用。它看起来不错,但是当你按下加载更多按钮时,“v”并没有消失。

.elm-button {
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
background-color: #ffffff;
text-shadow: none;
    box-shadow: none;
    border: none;
    padding-top: 45px;
    padding-bottom: 25px;
font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 19px;
    color: #848484;
    outline: none;
}

.elm-button.ajax-inactive {
display: none;    
}
.elm-button.is-loading .elm-button-text {
	display: none;
}

.elm-loading-anim {
	display: none;
}

.elm-button.is-loading .elm-loading-anim {
display: block;
}

.elm-button.is-loading .elm-button-text {
display: none;
}

.elm-loading-icon {
width: 1.5em;
height: 1.5em;
}
.elm-button::before {
            content: "v"; 
    font-size:11px;
    float: right;
    margin: 6px 0 0 14px;
    font-family: 'Days One', sans-serif;
}
.elm-button:active {
    content:none;
    visibility: hidden;
}

点击之前(这是我最终想要的样子)

enter image description here

点击后

(我不希望v出现)

enter image description here

有没有人对我如何添加向下箭头有任何建议?提前谢谢。

0 个答案:

没有答案