Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

button border clip-path

  • Hi, does anyone have an idea on how to add a border to a button with a clip-path on it? Is there an easy way with generateblocks?
    http://appl.davidecrivelli.com/sample-page/ like this one, for example – the borders which are not part of the normal button aren’t showing.
    Any hint? (I already did some research, but nothing yet).

    thanks!
    Davide

  • Hi Davide,

    This can not be achieved with the button block, it would be a bit more complicated. Try building the structure like this:https://app.screencast.com/5ZwC8S3sayFVZ

    - container
     -- container
      --- headline

    1. Set the outer container’s display to inline-flex, set background-color to the wanted border color.
    2. Set the outer container’s paddings to the value you want for the border width.
    3. Set the inner container’s background color the the wanted button color.
    4. Add the clip-path CSS to both of the containers.

    Let me know if this helps!

  • Hi Ying, thank you for your reply, your solution seems to work out fine!
    thanks!
    Have a nice day!

    Davide

  • You are welcome   🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.