How to change the font style/size of text within a button

Question

I am using bootstrap and CSS to style my website but I can't seem to figure out how to change the font style and weight of the text within my buttons. Here is some of my code

<button type="button-apple" class="btn btn-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>

I would like to change the font to be bolder so the words are easier to read because on my screen they come out as very thin lines.

Thanks in advance.

Answer 1

Whenever you try to work into libraries, please keep in mind that, you are overriding the style they already defined . In that case, just defining new styles such as color, font-weight etc. will not work. And also, please don't try to modify the class names they are already using .

You Can solve it in several ways

First Method is to add a new class from your own example: here -> .my-button-class and try to do the styling. Then use !important with that, it will override the style you want.

For Example

Your HTML will be as follow:

<button type="button-apple" class="btn btn-light btn-lg download-button my-button-class">
<i class="fab fa-google-play"></i> Download
</button>

CSS for the first method

.my-button-class{
    font-weight: bolder !important;
    font-size: 2rem !important;
    color: blue !important;
};

Second Method using specificity which is calling a class inside of a tag for example: button.my-button-class to style it instead of using !important , that's also a very good solution.

CSS for the second method

button.my-button-class{
    font-weight: bolder;
    font-size: 2rem;
    color: blue;
};

Hope it will solve your problem. :)

Thanks

Answer 2

You can wrap your button text in an anchor and then use a span item:

<a href="#" class="btn btn-light btn-lg download-button">
    <i class="fab fa-google-play"></i>
    <span style="font-weight:bolder;">Download</span>
</a>