Question 2898 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How do I add additional hover effect in WordPress?

I have a button that I’d like to customize differently than what I’ve set the global buttons. I added the button and modified it but there is no option for editing the hover color of the button so I am trying to write additional CSS for it.

I set up a new class for the button

Custom-Button-Orange-to-Purple

but when I try to add the additional styling to this element (I did try and set up the class without the :hover and that didn’t work either).

.Custom-Button-Orange-to-Purple:hover {
background-color:#8601AF !important;
    border-color:none !important;
}

The button I’m trying to modify is the orange one at the bottom of the page here: Kidz Haven Daycare . The code changes the border of the button to purple which I don’t want.

I’m new to adding custom CSS (obviously) and would be grateful for some help!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This took a full days worth of hunting and trying different methods. What I did was to get rid of the class name I had added to the "Advanced" tab where I created the custom button. Instead I added HTML to the block on the page where the button would appear. I used a div container as well to be able to center it on the page.

    HTML added to the block with new class names:

    <div class="Center-Aligned-Custom-Button-Orange-to-Purple">

    WHY KIDS HAVEN DAYCARE

    ADDITIONAL CSS:

    .Center-Aligned-Custom-Button-Orange-to-Purple {
display:flex;
justify-content:center;
align-items:center;
    
}

.Custom-Button-Orange-to-Purple {
border-radius:8px !important;
font-family:Roboto !important;
font-size:15px !important;
font-weight:500 !important;
line-height: 25px !important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-top: 1px !important;
padding-bottom: 1px !important;
text-align: center !important;
background-color: #FB9902 !important;
color: #fff !important;
position: absolute !important!;
}

    I'm not certain if I "needed" to use the !important but given the amount of time it took to figure this out, I figured it was better safe than sorry!

    Thanks for the responses. I'm a total newbie, so some comments were over my


  2. 0

    This is what your CSS looks like, which is absolutely wrong:

    .wp-block-button:hover .Custom-Button-Orange-to-Purple:hover has-custom-font-size:hover {
    border-radius:8px;
    background-color:#8601AF !important;
}

    Also, there is no element with the class Custom-Button-Orange-to-Purple.

    This is what I understand from your question: You have customized the style of usual buttons, and now you want to style a button which should look different. If so, this may help:

    .btn-default {
  width: 100px;
}

.btn-default:hover {
  background-color: skyblue;
  color: #fff;
}

.btn-special:hover {
  background-color: purple;
  color: #fff;
  font-weight: bold;
}
    <button class="btn-default">Normal Button</button>
<button class="btn-default">Normal Button</button>
<button class="btn-default btn-special">Special Button</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search