How to change the colors of the button?

[christy012]

Select Topic Area

General

Body

Hi, I want to know how I can change the coding to change the color of female button? I want that this color on hover will change to pink from blue color. Screenshot is also attached. Kindly tell me the styling code which fulfil my requirement.
Just give the overview of this website, My client has own the website "BAC calculator" and it shows the accurate value of BAC.

[fateme25]

You should assume you have a button with a specific class or ID

▎HTML Example
<button class="female-btn">Female</button>

▎Css Example
.female-btn{
background-color: blue; /* Original color /
color: white; / Text color /
transition: background-color 0.3s ease; / Smooth transition /
}
.female-btn:hover {
background-color: pink; / Color on hover */
}

[shinybrightstar]

Welcome to the GitHub Community, @christy012, we're happy you're here! You are more likely to get a useful response if you are posting your question(s) in the applicable category and are explicit about what your project entails--giving a few more details might help someone give you a nudge in the right direction. This question belongs to the Programming Help category. I've gone ahead and moved it for you. Good luck!

[Niracash]

Hey there! you can change the hover color of the female button to pink using html and css like this:

HTML

<button class="male">Male</button>
<button class="female">Female</button>

CSS

button {
    background-color: blue;
    color: white;
    ...
}

button.female:hover {
    background-color: pink;
}

If your buttons are styled differently using a framework you might need to apply !important in the CSS:

button.female:hover {
    background-color: pink !important;
}