[Support request] add some hover effects on sidebar

Home Forums Support [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
    Posts
  • #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.
    Thanks

    #1088747
    Leo
    Staff
    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 🙂

    #1088784
    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

    #1089240
    David
    Staff
    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?

    #1089275
    Sanu Kumar

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

    #1089326
    David
    Staff
    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:

    https://cssgradient.io

    #1089367
    Sanu Kumar

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

    #1089600
    David
    Staff
    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.