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?
We are almost there.
The button is too small. How can I make it bigger?
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
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
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