Elements - Sandal

English

- 8:00 am to 10:00 pm

### Talk to us now

+49 555 000 000

### Visit our offices

Mirage Plaza - Hamburg

### Send us an email

hello@sandal.com

### We are open all day

8:00 am to 10:00 pm daily

# Elements

## Buttons

To create a button, use the `uk-button` class. You can also use the following classes to add color or style the button as a link: `uk-button-line, uk-button-default, uk-button-primary, uk-button-line, uk-button-success, uk-button-danger, uk-button-link`

### Examples

Default link
markup

    <a class="uk-button-line uk-button" href="" target="_self">Simple link</a>
    <button class="uk-button-default uk-button" href="" target="_self">input button</button>

### Button variations

Default Primary Success Danger Simple link
markup

    <a class="uk-button-default uk-button" href="" target="_self">Default</a>
    <a class="uk-button-primary uk-button" href="" target="_self">Primary</a>
    <a class="uk-button-success uk-button" href="" target="_self">Success</a>
    <a class="uk-button-danger uk-button" href="" target="_self">Danger</a>
    <a class="uk-button-line uk-button" href="" target="_self">Simple</a>
    <a class="uk-button-link uk-button" href="" target="_self">link</a>

### Button sizes

You can add different size classes to your button to create button size variation using the size classes `uk-button-mini`, `uk-button=small` or `uk-button-large`

mini button small button default button Large button

markup

    <a class="uk-button-color uk-button-mini uk-button" href="" target="_self">mini button</a>
    <a class="uk-button-color uk-button-small uk-button" href="" target="_self">small button</a>
    <a class="uk-button-color uk-button" href="" target="_self" size="">default button</a>
    <a class="uk-button-color uk-button-large uk-button" href="" target="_self">Large button</a>

### Button group

To create a button group, wrap the `button_group` class around the buttons that you'd like to be in the same group.

small medium large
bad average good
markup

    <div class="uk-button-group">
      <a class="uk-button-color uk-button" href="" target="_self">small</a>
      <a class="uk-button-color uk-button" href="" target="_self">medium</a>
      <a class="uk-button-color uk-button" href="" target="_self">large</a>
    </div>

### Button with icons

To create a button with icon, add the `uk-icon-{icon}` class besides the text of the button. Click here to see a list of all icons

complete events list gallery Download
markup

    <a class="uk-button-default uk-button" href="" target="_self"><i class="uk-icon-camera"></i> gallery</a>

### Icon buttons

You can create icon buttons using the `uk-icon-button` class. These can come in handy especially when creating social icons.

markup

    <a href="" class="uk-icon-button uk-icon-twitter" target="_self"></a>
    <a href="" class="uk-icon-button uk-icon-dribbble" target="_self"></a>
    <a href="" class="uk-icon-button uk-icon-facebook" target="_self"></a>

Sandal LLC.
Hamburg, Germany
One Street | Two Drive,
10th Floor, Site Wing
+49 555 000 000
hello@sandal.com
support@sandal.com

### Recent Posts

- Have faith in your abilities
  Believe in yourself! Have faith in your abilities! Without a...
- Live in the only moment
  Always continue the climb. It is possible for you to...

### Our Work

- Gaucho Cafe
- Fontaine Corp
- Saffron Magazine
- Celsius gallery
- Fidelity business
- Lighthouse Church
- Sauna Spa

### Our Values

Do not dwell in the past, do not dream of the future, concentrate the mind on now.

Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future.

Copyright © Sandal Template by arrowthemes