Hover in button

Shapely
1

Hi Movin,
I wanted to ask for your help with the design of the buttons. I’m trying to have the same look as the main page, but the hover gives me a purple color. I managed to remove the color of the link text visited on the button, but I can not change the background color of the button in hover.
In the css editor when hovering the mouse over the button, the desired hover effect is achieved. But in the page doesn’t show.
This is what I have for now:
.btn{
align: center;
text-align: center;
letter-spacing: .02;
color: #ffffff;
background-color: #cf000f;
margin-bottom: 1em;
font-size: 0.9em;
border: 0px;
}
.btn:hover{
background-color: #cf000f;
opacity: 0.8;
}
.btn:visited {
color: #ffffff;
}

My site is www.chilecooks.cl

Thanks!
Noelle

2

Hi Noelle,

I hope you are well today and thank you for your question.

To achieve this try changing your shared code as following.

#page .btn{
align: center;
text-align: center;
letter-spacing: .02;
color: #ffffff;
background-color: #cf000f;
margin-bottom: 1em;
font-size: 0.9em;
border: 0px;
}
#page .btn:hover{
background-color: #cf000f;
opacity: 0.8;
}
#page .btn:visited {
color: #ffffff;
}

Best Regards,
Movin