Menu icon Foundation
Custom Button: Radius

I am wanting to create a custom button using mixin. However, I have noticed there is no reference to button-radius. Is this going to be added?

If not, what is the work around for this. I am not wanting to change the default as its only some buttons that will have radius required.

buttonappradius

I am wanting to create a custom button using mixin. However, I have noticed there is no reference to button-radius. Is this going to be added?

If not, what is the work around for this. I am not wanting to change the default as its only some buttons that will have radius required.

Luke Pullin over 3 years ago

What I am trying to achieve is a custom button with the following attributes:

  • button has border radius of 2px
  • button background is linear gradient
  • button font color is white

Please post an example of how I would achieve this

Rafi Benkual over 3 years ago

Hi Luke
The button mixin has a $button-radius variable which you can add your radius with. It's also in the setting file.

I did notice the button-style mixin does not include the $button-radius variable. That is something you can add in there.

I've added into the framework so it will out in the next release. You can copy the method from here: https://github.com/zurb/foundation-apps/commit/855544536c3922f8e11af5a96afc96fff31db644