Красивые, адаптивные кнопки с группировкой, отлично подойдут для любого типа сайта!
Кнопки FLAT на чистом CSS.
<section class="c-example">
<h2 class="c-example__title">Base</h2>
<a class="c-button">Default</a>
<a class="c-button c-button--primary">Primary</a>
<a class="c-button c-button--secondary">Secondary</a>
<a class="c-button c-button--outline">Outline</a>
<a class="c-button c-button--link">Link</a>
<a class="c-button c-button--info">Info</a>
<a class="c-button c-button--success">Success</a>
<a class="c-button c-button--warning">Warning</a>
<a class="c-button c-button--error">Error</a>
</section>
<section class="c-example">
<h2 class="c-example__title">Small</h2>
<a class="c-button c-button--small">Default</a>
<a class="c-button c-button--small c-button--primary">Primary</a>
<a class="c-button c-button--small c-button--secondary">Secondary</a>
<a class="c-button c-button--small c-button--outline">Outline</a>
<a class="c-button c-button--small c-button--link">Link</a>
<a class="c-button c-button--small c-button--info">Info</a>
<a class="c-button c-button--small c-button--success">Success</a>
<a class="c-button c-button--small c-button--warning">Warning</a>
<a class="c-button c-button--small c-button--error">Error</a>
</section>
<section class="c-example">
<h2 class="c-example__title">Large</h2>
<a class="c-button c-button--large">Default</a>
<a class="c-button c-button--large c-button--primary">Primary</a>
<a class="c-button c-button--large c-button--secondary">Secondary</a>
<a class="c-button c-button--large c-button--outline">Outline</a>
<a class="c-button c-button--large c-button--link">Link</a>
<a class="c-button c-button--large c-button--info">Info</a>
<a class="c-button c-button--large c-button--success">Success</a>
<a class="c-button c-button--large c-button--warning">Warning</a>
<a class="c-button c-button--large c-button--error">Error</a>
</section>
<section class="c-example">
<h2 class="c-example__title">Disabled</h2>
<a class="c-button is-disabled">Default</a>
<a class="c-button c-button--primary is-disabled">Primary</a>
<a class="c-button c-button--secondary is-disabled">Secondary</a>
<a class="c-button c-button--outline is-disabled">Outline</a>
<a class="c-button c-button--link is-disabled">Link</a>
<a class="c-button c-button--info is-disabled">Info</a>
<a class="c-button c-button--success is-disabled">Success</a>
<a class="c-button c-button--warning is-disabled">Warning</a>
<a class="c-button c-button--error is-disabled">Error</a>
</section>
<section class="c-example">
<h2 class="c-example__title">Form Button</h2>
<input type="submit" class="c-button c-button--primary" value="type='submit'">
<input type="Button" class="c-button c-button--secondary" value="type='button'">
<input type="reset" class="c-button c-button--error" value="type='reset'">
<button type="button" class="c-button c-button--outline">button</button>
</section>
<section class="c-example">
<h2 class="c-example__title">Button + Font Awesome</h2>
<a class="c-button"><i class="fa fa-fw fa-cloud"></i> Cloud</a>
<a class="c-button"><i class="fa fa-fw fa-cog"></i> Cog</a>
<a class="c-button"><i class="fa fa-fw fa-database"></i> Database</a>
<a class="c-button"><i class="fa fa-fw fa-heart"></i> Heart</a>
<a class="c-button"><i class="fa fa-fw fa-search"></i> Search</a>
<a class="c-button"><i class="fa fa-fw fa-inbox"></i> Inbox</a>
</section>
<section class="c-example">
<h2 class="c-example__title">Button w/out text + Font Awesome</h2>
<a class="c-button"><i class="fa fa-fw fa-cloud"></i></a>
<a class="c-button"><i class="fa fa-fw fa-cog"></i></a>
<a class="c-button"><i class="fa fa-fw fa-database"></i></a>
<a class="c-button"><i class="fa fa-fw fa-heart"></i></a>
<a class="c-button"><i class="fa fa-fw fa-search"></i></a>
<a class="c-button"><i class="fa fa-fw fa-inbox"></i></a>
</section>
<section class="c-example">
<h2 class="c-example__title">Horizontal Group + Button</h2>
<div class="c-button-group c-button-group--horizontal">
<div class="c-button-group__item">
<a class="c-button">All</a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--outline">Published</a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--outline">Unpublished</a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--outline">Drafts</a>
</div>
</div>
</section>
<section class="c-example">
<h2 class="c-example__title">Horizontal Group + Small Button + Font Awesome</h2>
<div class="c-button-group c-button-group--horizontal">
<div class="c-button-group__item">
<a class="c-button c-button--small c-button--success"><i class="fa fa-fw fa-check"></i> New Email</a>
</div>
</div>
<div class="c-button-group c-button-group--horizontal">
<div class="c-button-group__item">
<a class="c-button c-button--small c-button--outline"><i class="fa fa-fw fa-mail-forward"></i> Forward</a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--small c-button--outline"><i class="fa fa-fw fa-archive"></i> Archive</a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--small c-button--outline"><i class="fa fa-fw fa-folder"></i> Move</a>
</div>
</div>
<div class="c-button-group c-button-group--horizontal">
<div class="c-button-group__item">
<a class="c-button c-button--small c-button--error"><i class="fa fa-fw fa-trash"></i> Delete</a>
</div>
</div>
</section>
<section class="c-example">
<h2 class="c-example__title">Horizontal Group + Button w/out text + Font Awesome</h2>
<div class="c-button-group c-button-group--horizontal">
<div class="c-button-group__item">
<a class="c-button c-button--outline"><i class="fa fa-fw fa-align-left"></i></a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--outline"><i class="fa fa-fw fa-align-justify"></i></a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--outline"><i class="fa fa-fw fa-align-right"></i></a>
</div>
</div>
<div class="c-button-group c-button-group--horizontal">
<div class="c-button-group__item">
<a class="c-button c-button--outline"><i class="fa fa-fw fa-bold"></i></a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--outline"><i class="fa fa-fw fa-italic"></i></a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--outline"><i class="fa fa-fw fa-underline"></i></a>
</div>
</div>
</section>
<section class="c-example">
<h2 class="c-example__title">Vertical Group + Button</h2>
<div class="c-button-group c-button-group--vertical">
<div class="c-button-group__item">
<a class="c-button">All</a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--outline">Published</a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--outline">Unpublished</a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--outline">Drafts</a>
</div>
</div>
</section>
<section class="c-example">
<h2 class="c-example__title">Vertical Group + Small Button + Font Awesome</h2>
<div class="c-button-group c-button-group--vertical">
<div class="c-button-group__item">
<a class="c-button c-button--small c-button--outline"><i class="fa fa-fw fa-euro"></i> EUR</a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--small c-button--outline"><i class="fa fa-fw fa-gbp"></i> GBP</a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--small c-button--outline"><i class="fa fa-fw fa-dollar"></i> USD</a>
</div>
</div>
</section>
<section class="c-example">
<h2 class="c-example__title">Vertical Group + Button w/out text + Font Awesome</h2>
<div class="c-button-group c-button-group--vertical">
<div class="c-button-group__item">
<a class="c-button c-button--outline"><i class="fa fa-fw fa-bar-chart"></i></a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--outline"><i class="fa fa-fw fa-pie-chart"></i></a>
</div>
<div class="c-button-group__item">
<a class="c-button c-button--outline"><i class="fa fa-fw fa-line-chart"></i></a>
</div>
</div>
</section>.c-example
{
position: relative;
padding: 30px 30px 0 30px;
border-bottom: 1px solid #ccd1d9;
}
.c-example__title
{
font-size: 18px;
font-weight: normal;
line-height: 24px;
margin: 0 0 20px 0;
}
.c-example .c-button {
margin-bottom: 30px;
}
.c-example .c-button-group--vertical {
margin-bottom: 30px;
}
.c-example .c-button-group--vertical .c-button {
margin-bottom: 0;
}
/**
* Component: Button
* --------------------------------------------------
*/
.c-button
{
font-family: "Open Sans", Arial, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 20px;
position: relative;
display: inline-block;
box-sizing: border-box;
min-height: 34px;
padding: 6px 12px;
cursor: pointer;
user-select: none;
transition: background-color .25s ease, border-color .25s ease, color .25s ease;
text-align: center;
vertical-align: middle;
white-space: normal;
text-decoration: none;
color: #fff;
border: 1px solid #434a54;
border-radius: 3px;
background: #656d78;
-webkit-appearance: none;
}
.c-button:hover
{
border-color: #434a54;
background-color: #434a54;
}
.c-button::-moz-focus-inner
{
margin: 0;
padding: 0;
}
.c-button:focus
{
outline: 1px dotted;
outline: 3px auto -webkit-focus-ring-color;
}
.c-button:hover,
.c-button:focus,
.c-button:active
{
text-decoration: none;
}
.c-button:disabled,
.c-button.is-disabled
{
cursor: not-allowed;
pointer-events: none;
opacity: .65;
}
/**
* Component: Button
* Modifier: Size
* --------------------------------------------------
*/
.c-button--small
{
font-size: 12px;
line-height: 18px;
min-height: 28px;
padding: 4px 8px;
border-radius: 2px;
}
.c-button--large
{
font-size: 16px;
line-height: 22px;
min-height: 40px;
padding: 8px 16px;
border-radius: 4px;
}
/**
* Component: Button
* Modifier: Variation
* --------------------------------------------------
*/
.c-button--primary
{
color: #fff;
border-color: #967adc;
background-color: #ac92ec;
}
.c-button--primary:hover
{
color: #fff;
border-color: #967adc;
background-color: #967adc;
}
.c-button--secondary
{
color: #fff;
border-color: #4a89dc;
background-color: #5d9cec;
}
.c-button--secondary:hover
{
color: #fff;
border-color: #4a89dc;
background-color: #4a89dc;
}
.c-button--outline
{
color: #434a54;
border-color: #434a54;
background-color: transparent;
}
.c-button--outline:hover
{
color: #fff;
border-color: #434a54;
background-color: #434a54;
}
.c-button--link
{
color: #5d9cec;
border-color: transparent;
background-color: transparent;
}
.c-button--link:hover
{
color: #4a89dc;
border-color: transparent;
background-color: transparent;
}
.c-button--success
{
color: #fff;
border-color: #8cc152;
background-color: #a0d468;
}
.c-button--success:hover
{
color: #fff;
border-color: #8cc152;
background-color: #8cc152;
}
.c-button--info
{
color: #fff;
border-color: #3bafda;
background-color: #4fc1e9;
}
.c-button--info:hover
{
color: #fff;
border-color: #3bafda;
background-color: #3bafda;
}
.c-button--warning
{
color: #fff;
border-color: #f6bb42;
background-color: #ffce54;
}
.c-button--warning:hover
{
color: #fff;
border-color: #f6bb42;
background-color: #f6bb42;
}
.c-button--error
{
color: #fff;
border-color: #da4453;
background-color: #ed5565;
}
.c-button--error:hover
{
color: #fff;
border-color: #da4453;
background-color: #da4453;
}
/**
* Component: Button Group
* --------------------------------------------------
*/
.c-button-group
{
font-size: 0;
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
}
.c-button-group + .c-button-group
{
margin-left: 30px;
}
.c-button-group__item:not(:first-child):not(:last-child) > .c-button
{
border-radius: 0 !important;
}
.c-button-group__item > .c-button
{
display: block;
width: 100%;
}
.c-button-group__item > .c-button:hover,
.c-button-group__item > .c-button:focus,
.c-button-group__item > .c-button:active
{
z-index: 1;
}
.c-button-group--horizontal > .c-button-group__item
{
display: inline-block;
margin-left: -1px;
}
.c-button-group--horizontal > .c-button-group__item:first-child:not(:only-child)
{
margin-left: 0;
}
.c-button-group--horizontal > .c-button-group__item:first-child:not(:only-child) > .c-button
{
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.c-button-group--horizontal > .c-button-group__item:last-child:not(:only-child) > .c-button
{
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.c-button-group--vertical > .c-button-group__item
{
display: block;
margin-top: -1px;
}
.c-button-group--vertical > .c-button-group__item:first-child:not(:only-child)
{
margin-top: 0;
}
.c-button-group--vertical > .c-button-group__item:first-child:not(:only-child) > .c-button
{
border-bottom-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.c-button-group--vertical > .c-button-group__item:last-child:not(:only-child) > .c-button
{
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.c-button-group--vertical > .c-button-group__item > .c-button
{
text-align: left;
}