How to replace Header CTA button with picture from media

How to replace Header CTA button with picture from media? How to do it with CSS?
I have my own custom CTA button and I want to replace it.

Hello there,

You can alter the default button with your image by using the following CSS code:


.button-slider {
   border: none;
   background-image: url('http://yoursite.com/path/to/button/image.png');
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;
   text-indent: -9999px;
   background-color: transparent;
}

To apply it to your site, you can add it into your site’s additional CSS option which resides under the Appearance > Customize > Additional CSS.

Regards,
Kharis

Thank you very much. It works.

How can I add button size dimensions. Button is very small with this code.
My button Width is 550px and Height 60px

Hello there,

Try this code:


.button-slider {
   border: none;
   background-image: url('http://yoursite.com/path/to/button/image.png');
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center center;
   text-indent: -9999px;
   background-color: transparent;
   display: inline-block;
   width: 550px;
   height: 60px;
}

Regards,
Kharis