How can I make a button in my main header area fill color when I hover mouse?

Something like this code is below. I am not sure whether this will work applying directly in Advance css or not.

I have already applied a css to make the button look as it is currently.

`@import url("https://fonts.googleapis.com/css?family=Roboto:100")

*
box-sizing border-box

body
background-color indigo
display flex
align-items center
justify-content center
height 100vh
width 100vw

.coolBeans
border 2px solid currentColor
border-radius 3rem
color yellow
font-family roboto
font-size 4rem
font-weight 100
overflow hidden
padding 1rem 2rem
position relative
text-decoration none
transition .2s transform ease-in-out
will-change transform
z-index 0

&::after
background-color yellow
border-radius 3rem
content: ''
display block
height 100%
width 100%
position absolute
left 0
top 0
transform translate(-100%, 0) rotate(10deg)
transform-origin top left
transition .2s transform ease-out
will-change transform
z-index -1

&:hover::after
transform translate(0, 0)

&:hover
border 2px solid transparent
color indigo
transform scale(1.05)
will-change transform

Hi there,

can you share a link to the site where i can see the button?

Here;

Give this CSS a try:

.main-navigation:not(.toggled) ul li.menu-button:hover a {
    background-color: #F16228;
}

Let me know :)

Hi Ying, Thanks! It works. How can I turn the text part white when color fills?

Just need to another another line like this :)

.main-navigation:not(.toggled) ul li.menu-button:hover a {
    background-color: #F16228;
    color: #ffffff;
}

Cannot combine these two css codes?

I mean replace this CSS:

.main-navigation:not(.toggled) ul li.menu-button:hover a {
    background-color: #F16228;
}

with the new CSS:

.main-navigation:not(.toggled) ul li.menu-button:hover a {
    background-color: #F16228;
    color: #ffffff;
}

Thank Ying, Can I also combine the above css in my actual css? See below.

` .main-navigation:not(.toggled) ul li.menu-button a {
border-width: 1px;
border:2px solid #F16228;
color: #000000;
line-height: 40px;

}

No, the selectors are different.

Thanks Ying.

No problem :)