Menu icon Foundation
Button with angled sides

Does Foundation have a way to make buttons with angled sides?  For example, I am looking for a way to make a button like the purple one on the top right corner of this website.

http://www.igxgamingexpo.com/rules/ultra-street-fighter-iv

Thanks,

Lee

htmlcssJava

Does Foundation have a way to make buttons with angled sides?  For example, I am looking for a way to make a button like the purple one on the top right corner of this website.

http://www.igxgamingexpo.com/rules/ultra-street-fighter-iv

Thanks,

Lee

Michal Pandyra 2 months ago

Since the example you've provided relies on several elements nested within each other, a fully animated solution like that isn't inherently possible using CSS alone. It is, however, possible to create angled "blades" to the left and right of a single button element using the :before and :after pseudo-selectors with in-line SVG content.

Elisandro Martinez 2 months ago

Michael,

Thank you for your feedback.  Can you direct me to examples of code?  I am not looking to recreate the animation attributes, I just want to make buttons with angled sides.  I am developing a website for the business I work for so the website needs to have a conservative look, not too flashy.

Thanks,

Lee

Michal Pandyra 2 months ago

Hi Lee,

Have a look here at a few examples:

https://www.w3schools.com/css/css_pseudo_elements.asp

https://codepen.io/clementpigeon/pen/gdwIn

Michal Pandyra 2 months ago

Hi Lee,

Two quick CSS only solutions that don't require any changes to HTML. Neither are particularly elegant and each has its own set of drawbacks.

This is drop-in CSS code that leverages variables already set by Foundation.

SVG images to the left and right of the button:

.button {
  
  position: relative;
  transition: none;
  
  &:before, &:after {
    display: block;
    position: absolute;
    height: calc( 100% + 2px);
    width: auto;
    top: -1px;
    bottom: 0;
    overflow: hidden;
    width: 15px;
    transition: none;
  }
  
  &:before {
    content: '';
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 50' preserveAspectRatio='none'%3E%3Cpolygon points='25,0 25,50 0,50' style='fill%3A#{$button-background}'%3E%3C/polygon%3E%3C/svg%3E");
    background-size: cover;
    right: calc( 100% + 1px );
  }
  
  &:after {
    content: '';
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 50' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 25,0 0,50' style='fill%3A#{$button-background}'%3E%3C/polygon%3E%3C/svg%3E");
    background-size: cover;
    left: calc( 100% + 1px );
  }
  
  &:hover, &:focus {
  
    &:before {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 50' preserveAspectRatio='none'%3E%3Cpolygon points='25,0 25,50 0,50' style='fill%3A#{$button-background-hover}'%3E%3C/polygon%3E%3C/svg%3E");
    }

    &:after {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 50' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 25,0 0,50' style='fill%3A#{$button-background-hover}'%3E%3C/polygon%3E%3C/svg%3E");
    }
  }
  
}

Non-SVG version that relies on CSS transformations and z-index positioning:

.button {
  
  background-color: transparent;
  position: relative;
  
  &:before {
    content: '';
    position: absolute;
    width: calc( 100% + 10px);
    height: 100%;
    top: 0;
    left: -5px;
    z-index: -1;
    background-color: $button-background;
    transform: skewX(-15deg);
  }
  
  &:hover, &:focus {
    background-color: transparent;
    
    &:before {
      background-color: $button-background-hover;
    }

  }
  
}

Elisandro Martinez 2 months ago

Michael,

 

Thank you so much for the examples!  I am going to look into your examples tomorrow and give you my feedback.

Best,

Lee