You are here:  » Button Foundation 6

Active Forum Topics


Button Foundation 6

Submitted by Tobix on Thu, 2020-02-27 17:36 in

I saw that in version 6 of foundation there are buttons that I would like to use in my project. They are called Hollow Button
https://get.foundation/sites/docs/button.html

How can I include them in my project?

Submitted by support on Fri, 2020-02-28 10:55

Hi Tobix,

The style can be re-created in Foundation 5 - add the following to html/default.css:

.hollow {
  background-color: #ffffff !important;
  border: 1px solid #008cba !important;
  color: #008cba !important;
}

...or as required, and add the class to a button;

<button class='hollow'>Click Me!</button>

The !important flag in the CSS is required to override the Foundation button styles - don't forget to do a hard refresh - CTRL+F5 in most browsers - when editing CSS to ensure that it is reloaded by the browser...

Cheers,
David.
--
PriceTapestry.com

Submitted by Tobix on Fri, 2020-02-28 18:30

We are almost there.
The button is too small. How can I make it bigger?

Submitted by support on Sat, 2020-02-29 09:04

Hi Tobix,

Try combining with the Foundation button size styles first;
https://get.foundation/sites/docs-v5/components/buttons.html
e.g.

<button class='hollow large'>Click Me!</button>

Otherwise you could specify the style in your .hollow class definition e.g.

.hollow {
  background-color: #ffffff !important;
  border: 1px solid #008cba !important;
  color: #008cba !important;
  width: 100px !important;
  height: 30px !important;
}

Cheers,
David.
--
PriceTapestry.com

Submitted by Tobix on Sat, 2020-02-29 18:55

not work :(

Submitted by support on Mon, 2020-03-02 10:47

Hi Tobix,

Ah - it looks like Foundation is applying padding. Try without any Foundation classes, so just in CSS:

.hollow {
  background-color: #ffffff !important;
  border: 1px solid #008cba !important;
  color: #008cba !important;
  width: 100px !important;
  height: 30px !important;
  padding: 0 !important;
}

...and your code just:

<button class='hollow'>Click Me!</button>

Cheers,
David.
--
PriceTapestry.com