Appear an image in the button when hover

Question

This is a code from the W3Schools. It is an animated button which when you hover appears a narrow next to the text. You can see that under the .button span:after {content: '\00bb'...} . How can I replace the narrow ('\00bb') with any image I want? Probably is very easy but i am new and i can't figure it out. Thank you.

 .button { border-radius: 4px; background-color: darkgreen; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; }.button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } **.button span:after { content: '\00bb'**; position: absolute; opacity: 0; top: 0; right: -100px; transition: 0.5s; }.button:hover span { padding-right: 55px; }.button:hover span:after { opacity: 1; right: 0; }

 <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <h2>Animated Button</h2> <button class="button"><span>Hover </button>

Answer 1

Your actual content pertains to some character. You can load a different icon from a font here or upload an image. Then you have to leave the content blank and put the image in the background.

content: "";
background:  url('../images/your-image.png') no-repeat;

Answer 2

You can pass image and also It could be a gradient

content: url('Image url');

you can refer https://css-tricks.com/ for learn more about content