add some hover effects on sidebar

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 :)

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

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?

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

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:

https://cssgradient.io

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

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;
}