Can you add images within Buttons?

[tapoulton2]

Hi,

I’m looking to recreate the buttons used on https://www.calm.com/. I want to add gradient and patterned images within buttons. How’s this best achieved? Any support on this would be awesome.

Many thanks!

Tom

[rad]

Hi Tom,

Thanks for reaching out.

It should be the same as how you add backgrounds to other elements using CSS, example, you can add this to Theme Options > CSS

.awesome_button {
background: url( http://example.com/image.jpg ) #fff;
}

Then you can use this tool for gradient https://www.colorzilla.com/gradient-editor/, an example

.awesome_button {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

Now, you can just inspect your button and add awesome_button to its class name.

You may check this https://www.w3schools.com/css/ for CSS tutorial

Cheers!

[tapoulton2]

Wow, that’s awesome! Thank you very much. And what do I do if I want to add some different when hovering?

[nabeel]

Hey Thomas,

For hover state you can use the following selector awesome_button:hover e.g:

.awesome_button:hover {
background: url( http://example.com/image-hover.jpg ) #fff;
}
.awesome_button:hover {
background: #081422; /* Old browsers */
background: -moz-linear-gradient(top,  #081422 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #081422 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #081422 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#081422', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

Change the values as per your need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Hope this helps!