1. HOT Divi Ultimate Header Plugin - Design Divi custom header globally in Divi Builder: https://header.diviultimate.com/
    Dismiss Notice

Shop page / Button design

Discussion in 'Get Help On Divi Wordpress' started by bunaziua, Jul 8, 2019 at 5:02 AM.

  1. bunaziua

    bunaziua New Member

    Hi everyone,
    I have a shopping website created with Divi.
    I have an all website personalised Buttons like this
    [​IMG]

    Now the question is, How do I personalise like this button the rest ones like from shopping page, because there are standart editings like border, color and hover, but I also need to edit the shadow and the Gradient button. How do I can make those changes? Adybody got the css?
    Thanks
     
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
     
  3. bunaziua

    bunaziua New Member

    Im doing it in localhost. I can share some screens if it will help somehow. Thanks
     
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    #page-container .et_pb_button {
        background: #eff211!important;
        border: 1px solid #eff211!important;
        box-shadow: 3px 5px 0 0 #8cd0e3!important;
        color: #333!important;
        border-radius: 0!important;
    }
    Adjust it to your liking.
     
  5. bunaziua

    bunaziua New Member

    Its not working this css. The buttons I want to change now looks like this
    [​IMG]
    But I need it to look like this
    [​IMG]
    And also on mouse hover it must have a Gradient color on it. Is that possible? Thanks :)
     
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below instead in Divi > Theme Options > Custom CSS::
    Code:
    #page-container .button {
        background: #8cd0e3!important;
        border: 1px solid #8cd0e3!important;
        box-shadow: 3px 5px 0 0 #eff211!important;
        color: #fff!important;
        border-radius: 0!important;
        transition: background 0s!important;
    }
    #page-container .button:hover {
        background: linear-gradient(to bottom right,rgba(58,238,160,0.75) 0,rgba(49,67,238,0.75) 100%)!important;
    }
     
  7. bunaziua

    bunaziua New Member

    Its working. Thanks a lot. You just saved me.
     
  8. bunaziua

    bunaziua New Member

    Also can you please give me the code to make the text weight Light and to make it uppercase, and to change the size of text. Thank you
     
  9. Divi.Help

    Divi.Help Administrator
    Staff Member

    Text weight:
    font-weight: 300!important;

    Uppercase:
    text-transform: uppercase!important;

    Size of text:
    font-size: 14px!important;