Icons Appearing When Hovered In Buttons

Support
#1

Hi,
I am using this css for my buttons:

#cs-content .x-btn.x-btn-flat.help, #cs-content .x-btn.x-btn-flat.help:hover {
background-color: blue;
border-width: 1px; 
border-color: orange;
font-size: 24px;
padding: 15px 32px;
}
#cs-content .x-btn.x-btn-flat.ready:hover {
background-color: red;
border-width: 2px
}

I would like one of the many icons you have to display next to the text once appeared
What css do I need for this?
I would like it to appear infant of the text, however would also like some to appear after the text if I chose to use this on other buttons within my website

What Css do i need to add to incorporate one of these buttons
Thanks

#2

Hi There,

Please change your custom CSS to:

#cs-content .x-btn.x-btn-transparent.videos:hover {
    color: white;
    transition: 0.7s;
    border-color: white;
    background: url(https://theretold.com/wp-content/uploads/2017/07/1499351556_Vector-icons_10-copy.png) no-repeat;
    background-position: 660px center;
    background-size: auto 100%;
}
#3

Hi, thanks for the reply
This code makes the icon slide in from the left throughout the entire button and end up on the right hand side
Is there a CSS to just simply make the icon fade in on the left instead of sliding in?
Thanks

#4

Hi,

Regretfully, I am not entirely sure what you mean fade in on the left.

You can try removing the background-position: 660px center;

IF that doesn’t help, can you provide us an example.of what you are trying to achieve.

Thanks

#5

Please note the images are not in order. The order goes 1,4,2,3

As shown by these images, the arrow starts from the left and slides through to the right where it stays
Instead of this animation of the icon appearing once hovered i would like it to simply fade in to the left of the writing like this image attached
Thank you

#6

Hello There,

Thanks for sending us the screenshot.
1.) Please remove the code given by @Thai.

#cs-content .x-btn.x-btn-transparent.videos:hover {
    color: white;
    transition: 0.7s;
    border-color: white;
    background: url(https://theretold.com/wp-content/uploads/2017/07/1499351556_Vector-icons_10-copy.png) no-repeat;
    background-position: 660px center;
    background-size: auto 100%;
}

2.) Replace it with this code instead:

#cs-content .x-btn.x-btn-transparent.videos:hover {
    color: white;
    transition: 0.7s;
    border-color: white;
}

#cs-content .x-btn.x-btn-transparent.videos strong{
    position: relative;
}

#cs-content .x-btn.x-btn-transparent.videos strong:after {
    content: "";
    width: 30px;
    height: 40px;
    background: url(https://theretold.com/wp-content/uploads/2017/07/1499351556_Vector-icons_10-copy.png) top center no-repeat;
    background-size: cover;
    display: block;
    position: absolute;
    top: -10px;
    right: -40px;
    opacity: 0;
    transition: opacity 0.7s ease;
}

#cs-content .x-btn.x-btn-transparent.videos:hover strong:after {
    opacity: 1;
}

We would loved to know if this has work for you. Thank you.

#7

Great, the icon appears once hovered
However the button now looks like

I can’t edit the non hovered button now in CSS
I would like the boarder to be white and the width 100%
How do i edit this button now in CSS
Thank you so much for your help

#8

Hello There,

Thanks for updating in!

1.) Please do not remove your old code. Only remove the code given by @Thai. The code I have given is just a modified version of @Thai’s code with the purpose of having the button to just fade in.

2.) The button is no longer fullwidth because you may have turn off the block option.

Hope this helps. Kindly let us know.

#9

Leaving the old CSS in there worked
Thank you for your help
In order to use this on other buttons what specific things do i need to know?
Thanks again

#10

Hi there,

You’ll have to add videos to button’s Class input field. Then add <strong></strong> in your button’s text.

Thanks!