Foundation Button Group

Button Group

Foundation can create a series of buttons in the same row.

You can use the <ul> element and add .button-group class to create a button group:

Examples

<Ul class = "button-group ">
<Li> <button type = " button" class = "button"> Apple </ button> </ li>
<Li> <button type = " button" class = "button"> Samsung </ button> </ li>
<Li> <button type = " button" class = "button"> Sony </ button> </ li>
</ Ul>

try it"

Vertical button group

Vertical button group use .stack class to create. Note that the button spans the entire width of the parent element:

Examples

<Ul class = "button-group stack">
<Li> <button type = " button" class = "button"> Apple </ button> </ li>
<Li> <button type = " button" class = "button"> Samsung </ button> </ li>
<Li> <button type = " button" class = "button"> Sony </ button> </ li>
</ Ul>

try it"

.stack-for-small class for the small size of the screen, there are buttons arranged horizontally becomes vertical alignment:

Examples

<Ul class = "button-group stack-for-small">
<Li> <button type = " button" class = "button"> Apple </ button> </ li>
<Li> <button type = " button" class = "button"> Samsung </ button> </ li>
<Li> <button type = " button" class = "button"> Sony </ button> </ li>
</ Ul>

try it"

Rounded button group

Button group use .radius and .round class button to add rounded corners:

Examples

<Ul class = "button-group radius">
<Li> <button type = " button" class = "button"> Apple </ button> </ li>
<Li> <button type = " button" class = "button"> Samsung </ button> </ li>
<Li> <button type = " button" class = "button"> Sony </ button> </ li>
</ Ul>

<Ul class = "button-group round">
<Li> <button type = " button" class = "button"> Apple </ button> </ li>
<Li> <button type = " button" class = "button"> Samsung </ button> </ li>
<Li> <button type = " button" class = "button"> Sony </ button> </ li>
</ Ul>

try it"

Uniform extension button group

.even-num class for the width of the button group button and a uniform distribution across the width of the parent element of 100%.

num is the number of buttons in the button group, from 1-8:

Examples

<Ul class = "button-group even-3">
<Li> <button type = " button" class = "button"> Apple </ button> </ li>
<Li> <button type = " button" class = "button"> Samsung </ button> </ li>
<Li> <button type = " button" class = "button"> Sony </ button> </ li>
</ Ul>

<Ul class = "button-group even-5">
<Li> <button type = " button" class = "button"> Apple </ button> </ li>
<Li> <button type = " button" class = "button"> Samsung </ button> </ li>
<Li> <button type = " button" class = "button"> Sony </ button> </ li>
<Li> <button type = " button" class = "button"> HTC </ button> </ li>
<Li> <button type = " button" class = "button"> Huawei </ button> </ li>
</ Ul>

<Ul class = "button-group even-8">
<Li> <button type = " button" class = "button"> A </ button> </ li>
<Li> <button type = " button" class = "button"> B </ button> </ li>
<Li> <button type = " button" class = "button"> C </ button> </ li>
<Li> <button type = " button" class = "button"> D </ button> </ li>
<Li> <button type = " button" class = "button"> E </ button> </ li>
<Li> <button type = " button" class = "button"> F </ button> </ li>
<Li> <button type = " button" class = "button"> G </ button> </ li>
<Li> <button type = " button" class = "button"> H </ button> </ li>
</ Ul>

try it"

Drop-down button

Drop-down menu button allows the user to select the set good value:

Examples

<-! Trigger the dropdown ->
<A href = "#" data -dropdown = "id01" class = "button dropdown"> Dropdown Button </ a>

<-! The actual dropdown ->
<Ul id = "id01" data -dropdown-content class = "f-dropdown">
<Li> <a href = " #"> Link 1 </ a> </ li>
<Li> <a href = " #"> Link 2 </ a> </ li>
<Li> <a href = " #"> Link 3 </ a> </ li>
</ Ul>

<-! Initialize Foundation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>

try it"

Examples of analytical

.dropdown class to create a drop-down menu button.

Use with data-dropdown=" id " attribute button or link to open the drop-down menu.

id value needs to match the contents (id01) pull-down menu.

In the <ul> Add in .f-dropdown classes and data-dropdown-content attribute to create content drop-down menu.

Last initialization Foundation JS.

Split button

We can also create a split button's drop-down menu. Only you need to add the button .split class and use the span element to generate a direction arrow button:

Examples

<Button class = "button split" > Split Button
<Span data-dropdown = "id01 "> </ span>
</ Button>

<Ul id = "id01" data -dropdown-content class = "f-dropdown">
<Li> <a href = " #"> Link 1 </ a> </ li>
<Li> <a href = " #"> Link 2 </ a> </ li>
<Li> <a href = " #"> Link 3 </ a> </ li>
</ Ul>

<-! Initialize Foundation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>

try it"