[Support request] add some hover effects on sidebar

Home Forums Support add some hover effects on sidebar

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1088730
    sanu kumar

    how to add some hover effects on the sidebar under the “KNOW MORE” which is of yellow colour on my blog.
    Plz, give me the CSS of its gradient colour also. Any gradient colour which you like I don’t.. have any problem with that.

    Customer Support

    Hi there,

    “Some hover effects” is a little vague for us to provide the code.

    Can you provide an example of what you’d like to achieve?

    Then we should be able to just copy the code.

    Let me know 🙂

    sanu kumar

    like in generate press theme….when we take our mouse cursor to the search tab…it becomes blue, when we remove mouse cursor it becomes white…. the same thing I would like to do in the sidebar under “know more” tab.
    I want its gradient colour as well…anyone you can provide the colour, I would accept but it should look good

    Customer Support

    Hi there,

    sorry still a little unclear do you want to change the Background Color of the Know More Button or the Related Posts list below it?

    sanu kumar

    the background colour of know more button nd adds hover effects.

    Customer Support

    First thing is to remove the inline styles from the button you have added, the HTML inside the widget should look like this:

    <a class="button know-more" href="https://www.masteryblogging.com/about-us/">Know More</a>

    We can then target the button with this CSS:

    /* Know More button */
    a.button.know-more {
        background: linear-gradient(180deg, rgba(249,203,51,1) 0%, rgba(249,203,51,1) 74%);
        border-image: initial;
        border-radius: 50px;
        color: #303030;
        cursor: pointer;
        display: inline-block;
        font-size: 22px;
        margin: 3px 1px 0px;
        padding: 7px 25px;
        text-decoration-line: none;
        transition: color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s;
        border: 1px solid inherit;
    /* Know More Hover */
    a.button.know-more:hover {
        background: linear-gradient(180deg, rgba(249,203,51,1) 0%, rgba(190,0,50,1) 74%);
        color: white !important;

    You can change this in the Hover CSS to whatever you need:

    background: linear-gradient(180deg, rgba(249,203,51,1) 0%, rgba(190,0,50,1) 74%);

    This site is great for creating gradients:


    sanu kumar

    it works but it is not in the centre…how to put it in the centre

    Customer Support

    In you’re HTML you’re anchor link is wrapped in a <p> tag ie.

    <p><a class="button know-more" href="https://www.masteryblogging.com/about-us/">Know More</a></p>

    Edit it to include align-center ie.

    <p class="align-center"><a class="button know-more" href="https://www.masteryblogging.com/about-us/">Know More</a></p>

    Then add this CSS:

    .align-center {
        text-align: center;
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.