Add a down arrow next to button

712 views Asked by At

On my wordpress site I want to add a down arrow next to my load more posts button. I want the arrow to look like an upside down arrow. My load more button is controlled through a plugin (https://wordpress.org/plugins/easy-load-more/installation/). So I don't have a lot of control over it. enter image description here

I've tried adding in the down arrow through pseudo elements. However that did not work. It looked good, however when you pressed the load more button the "v" did not disappear.

.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;
}

before click (which is how I ultimately want it to look)

enter image description here

after click (i don't want the v to appear)

enter image description here

Does anyone have any suggestions for how I could add the down arrow? Thanks in advance.

0

There are 0 answers