mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
110 lines
4.1 KiB
HTML
110 lines
4.1 KiB
HTML
---
|
|
layout: default
|
|
title: Buttons
|
|
---
|
|
|
|
{% assign states = 'secondary dropdown-toggle,secondary,primary,danger' | split: ',' %}
|
|
{% assign states-outlined = 'primary,danger,success' | split: ',' %}
|
|
|
|
<div class="container">
|
|
<div class="row row-cards">
|
|
<div class="col-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Default buttons</h3>
|
|
<div class="row mb-3 sm-gutters">
|
|
<div class="col-auto">
|
|
{% for state in states %}
|
|
<button class="btn btn-{{ state }}">Button</button>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="col">
|
|
<input class="form-control d-inline-block w-auto">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3 sm-gutters">
|
|
<div class="col-auto">
|
|
{% for state in states %}
|
|
<button class="btn btn-sm btn-{{ state }}">Button</button>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="col">
|
|
<input class="form-control form-control-sm d-inline-block w-auto">
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3 sm-gutters">
|
|
<div class="col-auto">
|
|
{% for state in states %}
|
|
<button class="btn btn-lg btn-{{ state }}">Button</button>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="col">
|
|
<input class="form-control form-control-lg d-inline-block w-auto">
|
|
</div>
|
|
</div>
|
|
|
|
<p>
|
|
{% for state in states %}
|
|
<button class="btn btn-{{ state }}"><i class="fe fe-star mr-2"></i>Button</button>
|
|
{% endfor %}
|
|
</p>
|
|
<p>
|
|
{% for state in states %}
|
|
<button class="btn btn-{{ state }} btn-icon"><i class="fe fe-star"></i></button>
|
|
{% endfor %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3 class="card-title">
|
|
Outlined buttons
|
|
</h3>
|
|
<p>
|
|
{% for state in states-outlined %}
|
|
<button class="btn btn-outline-{{ state }}">Button</button>
|
|
{% endfor %}
|
|
</p>
|
|
<p>
|
|
{% for state in states-outlined %}
|
|
<button class="btn btn-outline-{{ state }} btn-icon"><i class="fe fe-star mr-2"></i>Button</button>
|
|
{% endfor %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<p>
|
|
<button type="button" class="btn btn-facebook"><i class="fa fa-facebook"></i></button>
|
|
<button type="button" class="btn btn-twitter"><i class="fa fa-twitter"></i></button>
|
|
<button type="button" class="btn btn-google"><i class="fa fa-google-plus"></i></button>
|
|
<button type="button" class="btn btn-youtube"><i class="fa fa-youtube"></i></button>
|
|
<button type="button" class="btn btn-vimeo"><i class="fa fa-vimeo-square"></i></button>
|
|
<button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble"></i></button>
|
|
<button type="button" class="btn btn-github"><i class="fa fa-github"></i></button>
|
|
<button type="button" class="btn btn-instagram"><i class="fa fa-instagram"></i></button>
|
|
<button type="button" class="btn btn-pinterest"><i class="fa fa-pinterest"></i></button>
|
|
<button type="button" class="btn btn-vk"><i class="fa fa-vk"></i></button>
|
|
<button type="button" class="btn btn-rss"><i class="fa fa-rss"></i></button>
|
|
<button type="button" class="btn btn-flickr"><i class="fa fa-flickr"></i></button>
|
|
<button type="button" class="btn btn-bitbucket"><i class="fa fa-bitbucket"></i></button>
|
|
</p>
|
|
<p>
|
|
<button type="button" class="btn btn-facebook"><i class="fa fa-facebook mr-2"></i> Facebook</button>
|
|
<button type="button" class="btn btn-twitter"><i class="fa fa-twitter mr-2"></i> Twitter</button>
|
|
<button type="button" class="btn btn-google"><i class="fa fa-google-plus mr-2"></i> Google Plus</button>
|
|
</p>
|
|
<p>
|
|
<button type="button" class="btn btn-sm btn-facebook"><i class="fa fa-facebook mr-2"></i> Facebook</button>
|
|
<button type="button" class="btn btn-sm btn-twitter"><i class="fa fa-twitter mr-2"></i> Twitter</button>
|
|
<button type="button" class="btn btn-sm btn-google"><i class="fa fa-google-plus mr-2"></i> Google Plus</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |