How to Change the Color of a Button

1555
2
07-19-2017 10:34 AM
AlixBakke_SNC
Occasional Contributor

How do I change the color of a button? Here is an example of a few colored buttons that I would like to mimic: 

Here is also an example of what I have done and the code I have used: 

If anyone knows the code I should be using to change the color of the buttons, please let me know!

Thank you.

Tags (1)
0 Kudos
2 Replies
KlaraSchmitt
Esri Contributor

#csstips
Hello Liz,

Since you are using the btn-primary class on your button, we're going to automatically apply your theme's link to any primary or default button classes. You can use inline CSS to change the styling of the buttons to more closely resemble our homepage if you wish by adding the btn-lg class after the btn class and using an embedded style tag or inline style tag to change the button's styling.

With embedded styles you'd do it something like this:

<style>
.btn-mine {
background-color: #000;
color: #fff;
}
.btn-mine:hover,
.btn-mine:focus {
background-color: #ccc;
color: #000;
}
</style>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<a href="#" class="btn btn-mine btn-lg">Learn More</a>‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Or you could style it inline like this:

<a href="#" class="btn btn-lg" style="background-color: #000; color: #fff">Learn More</a>‍‍‍
AlixBakke_SNC
Occasional Contributor

Thank you, Klara!

0 Kudos