Apply a clip-path to a button element

[philippe_bonneau]

Hi support. Is it possible to apply a clip-path to control the shape of a button. My goal is to have a rectangle with the bottom left corner cut (a pentagon). I have used CSS Clip Path Maker https://bennettfeely.com/clippy/ to make this code:

-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 33% 100%, 0 69%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 33% 100%, 0 69%);

I have tried to put this code in the Element CSS of the button element without success.

[nabeel]

Hi @philippe,

Thank you for reaching out to us. Yes you can, simply assign your button element a class e.g clip-path and then add the following code in the Theme Options > CSS:

.clip-path {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 33% 100%, 0 69%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 33% 100%, 0 69%);
}

This is the result i got when i tested the above code in my local setup:

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[philippe_bonneau]

Thanks so much @Nabeel! Fixed!!!

[ruenel]

You’re welcome!
We’re glad @Nabeel were able to help you out.