Make button parallelogram shape refresh theme

Store Design
1

I want my buttons all in a parallelogram form. I use the refresh theme. I hope someone can help me

1 Like
2

Always backup a theme before changing code.

Since buttons in dawn based themes do not wrap text in child spans we cannot just use a single simple CSS skew transformation( transform: skewX(20deg); ) as that will make the text slanted as well.

Nor can we use psuedo-elements as they are often already being greedily used.

So a clip-path for modern browsers may be the simplest approach.

At the bottom of the base.css file in the themes assets add the following CSS rule:

.button {
 clip-path: polygon(10px 10%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

There will be additional CSS rules needed to be explored to have this working everywhere in the refresh-theme especially with buttons that have no background-color, or separate box-shadows, underlays, or pseudo elements adding things, etc etc.

If there’s to much CSS to learn , then the alternative is to find every button|link-button in the code and wrap the text with to target with CSS to unskew the text after skewing it’s parent or containing element like an anchor <a class="button> .

Example html


 Shop buttons

CSS

.button {
 transform: skewX(20deg);
}
.unskew{
 transform: skewX(-20deg);
}

Goodluck.

3

Hi @pdrwa ,

You can use the code below.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the code below at the very bottom of the file.
.button::after, .button::before {
    transform: skew(-20deg);
}
.button {
background: unset !important
}

.button::before {
    background: rgba(var(--color-button),var(--alpha-button-background));
}