Skip to content

Instantly share code, notes, and snippets.

@Potherca Potherca/dabblet.css
Last active Aug 29, 2015

Embed
What would you like to do?
Button Group with Zurb Foundation
/**
* Button Group with Zurb Foundation
*
* This component offers a way of give a user the option to choose
* where to go after submitting a form by offering a group of buttons
* to choose from. Starting out, only the "default" choice is visible.
* Once the user hovers over the "default" choice other options become
* visible.
*
* Extra styles are provided to right-align the buttons in the group,
* to compliment the `.right` class in Zurb.
*
* There is also the option to add extra emphasis on the boundry of
* the box by adding a border to it with a `with-border` class
*/
@import url('//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/css/foundation.min.css');
.custom-button-group {
display: inline-block;
border-radius: 0.25em;
text-align: left;
}
.custom-button-group > .button,
.custom-button-group > * {
display: block;
visibility: hidden;
margin: 0.5em;
opacity:0;
transition:opacity 0.35s linear;
}
.custom-button-group :nth-child(1) {
visibility: visible;
opacity:1;
}
.custom-button-group:hover > .button,
.custom-button-group:hover > * {
visibility: visible;
opacity:1;
}
/* Right aligned button group
********************************************************************/
.custom-button-group.right > .button,
.custom-button-group.right > * {
float: right;
clear: both;
}
/* Add a border in hover when requested
********************************************************************/
.custom-button-group.with-border:hover {
box-shadow: 0 0 0.1em 0 #000
, 0 0 0.5em 0.1em #333
;
}
/*EOF*/
/* STYLES BELOW NOT NEEDED FOR BUTTON GROUP, JUST HERE FOR PRESENTATION
********************************************************************/
h1, h2 {
clear:both;
width: 100%;
border-bottom: 1px solid rgba(0,0,0,0.15);
}
.wrapper {
text-align: center;
padding: 1em;
}
<div class="wrapper">
<h1>Custom Button Groups in Zurb Foundation</h1>
<div class="custom-button-group">
<button class="radius">Default Button</button>
<a href="#" class="button radius secondary">This is an anchor disguised as a button</a>
<button class="radius secondary">Another Button</button>
<a href="#" class="radius secondary">This is a normal anchor</a>
</div>
<h2 class="right">Right Aligned</h2>
<div class="custom-button-group right">
<button class="radius">Default Button</button>
<a href="#" class="button radius secondary">This is an anchor disguised as a button</a>
<button class="radius secondary">Another Button</button>
<a href="#" class="radius secondary">This is a normal anchor</a>
</div>
<h2 class="left">With border on hover</h2>
<div class="custom-button-group with-border left">
<button class="radius">Default Button</button>
<a href="#" class="button radius secondary">This is an anchor disguised as a button</a>
<button class="radius secondary">Another Button</button>
<a href="#" class="radius secondary">This is a normal anchor</a>
</div>
</div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.