[Resolved] Buttom with Gradient background

Home Forums Support [Resolved] Buttom with Gradient background

Home Forums Support Buttom with Gradient background

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #746583
    Jagoba

    Hi,

    I would like to have buttoms with a gradient background made of 2 different colors, I guess it must be possible as it is very common nowadats, but I do not know how to do it.
    Could you please help me?

    Many thanks,
    Maca.

    GP Premium 1.7.5
    #746792
    David
    Staff
    Customer Support

    Hi there,

    for all buttons you could so something like this – i even added a simple hover effect 🙂 :

    a.button {
        border-radius: 25px; /*adjust accordingly */
        background: rgb(255, 183, 65);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(49%, rgba(255, 183, 65, 1)), to(rgba(214, 38, 38, 1)));
        background: linear-gradient(180deg, rgba(255, 183, 65, 1) 49%, rgba(214, 38, 38, 1) 100%);
        -webkit-transition: all 0.35s ease;
        transition: all 0.35s ease;
        background-repeat: repeat-y;
        background-size: 100% 90px;
        background-position: 0 -30px;
    }
    
    a.button:hover {
        background-position: 0 0;
    }

    And for creating linear gradients, this site is great:

    https://cssgradient.io

    #746814
    Jagoba

    Wow, that´s great! Thanks!
    And how can I change the squares into round?

    #746817
    David
    Staff
    Customer Support

    I edited the code above to include the border-radius property. Just increase the px or change it to % to suit

    #746824
    Jagoba

    Thanks!!

    #746826
    David
    Staff
    Customer Support
    #822991
    ivar

    how to apply the code to the entire site? (does not work for comment button)

    #823158
    David
    Staff
    Customer Support

    Hi there,

    you would need to add another selector to the CSS.

    First CSS Rule
    1st line change this a.button to a.button, #submit

    Second CSS Rule
    1st line change this a.button:hover to a.button:hover, #submit:hover

    #823604
    ivar

    You have the best technical support I’ve ever seen! Thank you!

    #823641
    David
    Staff
    Customer Support

    Glad that we can be so helpful 🙂

    #1129154
    Sheree

    I have just implemented this code and it looks great (thanks!) However, my mail chimp sign-up button does not have the new settings.

    I would also like to change the button colour from orange to purple (##8327f4). This is selected in the customisation options but guessing I would need to add something into the CSS?

    #1129162
    Leo
    Staff
    Customer Support

    Any chance you can open a new topic and link us to the page in question?

    It’s likely that MailChimp has their own button styles.

    #1129163
    Sheree

    Thanks Leo, will do it now 🙂

    #1129164
    Leo
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.