1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Decorative Lines From Button (CSS) -- Thank you!

Discussion in 'Free Divi Community Forum' started by Shaunster, Jul 5, 2023.

  1. Shaunster

    Shaunster New Member

    I have a button in the middle of my page.

    I'm trying to add decorative lines coming out from either side of the button, about the size of the button on either side. See image (below and attached).

    [​IMG]
    How do I make these lines?

    CSS? Any ideas?

    I will be creating this same effect in different colors on different pages. If CSS is needed, can I keep the code within the button module (so I can change the color easily on a different page)?

    Thank you so much!
     

    Attached Files:

    #1 Shaunster, Jul 5, 2023
    1. PRO MEMBER PERKS Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below CSS in the Button module settings > Advanced > Custom CSS > Before:
    Code:
    Log In or Sign Up to view this code.
     
    #2 Divi.Help, Jul 7, 2023
  3. Shaunster

    Shaunster New Member

    Really appreciate this. I get this:

    [​IMG]
     
    #3 Shaunster, Jul 7, 2023
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Beautify your Divi archive / category page with 15 different premade blog designs:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL. Make sure that you save it & see it live. The display is wrong in the Visual Builder, but correctly in the live site.
     
    #4 Divi.Help, Jul 7, 2023
  5. Shaunster

    Shaunster New Member

    Good call!

    The line appears with the editor on but when I turn off the editor it disappears.

    Why would it show with the editor on and disappear with the editor off?
     
    #5 Shaunster, Jul 8, 2023
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Beautify your Divi archive / category page with 15 different premade blog designs:Learn More
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    The line doesn't appear at all? In the live site? Then perhaps it's because of overflow issue. Try to set the button module settings overflow to be visible & see if it works.
     
    #6 Divi.Help, Jul 8, 2023
  7. Shaunster

    Shaunster New Member

    #7 Shaunster, Jul 8, 2023
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    For that case, I think it's because you set the icon to be hidden for the button module & the pseudo element is being hidden with higher CSS priority. Thus, the CSS 'display: block!important' in the module settings doesn't work as expected.

    So, you can either set the button to have icon, or you can use the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
    **For the button module settings, you need to add CSS Class green-lines
    **And you need to have the previous CSS in the button module settings as well.
     
    #8 Divi.Help, Jul 8, 2023
  9. Shaunster

    Shaunster New Member

    You're right for the icon. However, when I disabled the icon and added your css/css class, the lines disappeared again. I left the site per your instructions if you'd like to take a look.

    This may also be related to the other post.

    This is so frustrating.

    Thanks so much
     
    #9 Shaunster, Jul 9, 2023
    1. PRO MEMBER PERKS Divi Block Pro - Premade promo bar / notification bar with close button for your Divi site without using any plugins:View Demo
  10. Divi.Help

    Divi.Help Administrator
    Staff Member

    Actually for your Formulas page, I was not able to see any image or button in it: https://wordpress-408461-3677516.cloudwaysapps.com/formulas/

    If you wish to disable the button icon, then you will need to add the CSS in Divi > Theme Options > Custom CSS as mentioned in previous post:
    Code:
    Log In or Sign Up to view this code.
    You will also need to add the below CSS in the Button module settings > Advanced > Custom CSS > Before:
    Code:
    Log In or Sign Up to view this code.
     
    #10 Divi.Help, Jul 9, 2023
  11. Shaunster

    Shaunster New Member

    #11 Shaunster, Jul 9, 2023
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites:View Demo
  12. Divi.Help

    Divi.Help Administrator
    Staff Member

    As mentioned in previous post, try the below CSS in Divi > Theme Options > Custom CSS & it should work:
    Code:
    Log In or Sign Up to view this code.
     
    #12 Divi.Help, Jul 9, 2023
  13. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
     
    #13 Divi.Help, Sep 7, 2023
    1. PRO MEMBER PERKS Divi.Help Layout AI Generator - Try the power of AI to generate a custom Divi layout for you:Try Now
(You must log in or sign up to post here.)