Кнопки для сайта

Кнопки для сайта являются удобным инструментом, когда речь идет о более традиционных действиях. С этой целью Основа включает в себя множество простых в использовании стилей кнопок, которые можно настроить или переопределить.

Основа кнопки имеет ряд параметров и стилей — вы можете увидеть несколько примеров ниже. Классы кнопок имеют размер, тип, цвет и стиль CSS3 (квадратные, слегка закругленные, и полностью закруглённые).



<a href=
http://www.pixelcom.crimea.ua/"#" class="[tiny, small, medium, large] button">Текст кнопки</a>
<a href=
http://www.pixelcom.crimea.ua/"#" class="[radius, round] button">Текст кнопки</a>
<a href=
http://www.pixelcom.crimea.ua/"#" class="[success, alert, secondary] button">Текст кнопки</a>


Классы кнопки могут быть применены и к элементам button , а также к типу ввода элементов input type="submit «.

Группы кнопок

При необходимости группа действий, кнопка группы даёт некоторые простые в использовании возможности.

Кнопка Group — Радиус

Простая кнопка группы ul.button , в которой каждый li содержит кнопки. Вы можете прикрепить стиль кнопки, такие как радиус или закруглённые углы, на всю группу, и основа будет применять стиль как к первой так и к последней кнопке в группе.



<ul class="button-group [radius, rounded]">
  <li><a href=
http://www.pixelcom.crimea.ua/"#" class="button radius">Button 1</a></li>
  <li><a href=
http://www.pixelcom.crimea.ua/"#" class="button radius">Button 2</a></li>
  <li><a href=
http://www.pixelcom.crimea.ua/"#" class="button radius">Button 3</a></li>
</ul>


Группы кнопок

Если вы хотите группу кнопок заполнить по размеру окна, вы можете просто добавить два класса на группы: .even и еще .two-up, .three-up, .four-up, и .five-up.



<ul class="button-group even three-up">
  <li><a href=
http://www.pixelcom.crimea.ua/"#" class="button">Button 1</a></li>
  <li><a href=
http://www.pixelcom.crimea.ua/"#" class="button">Button 2</a></li>
  <li><a href=
http://www.pixelcom.crimea.ua/"#" class="button">Button 3</a></li>
</ul>


Кнопка бары

Кнопка группы бар группы кнопок (начало), идеально подходит для ситуаций, когда вы хотите группу действий, которые все связаны с аналогичными элемента или страницами. Просто оберните двумя или более группами кнопку div.button-bar и основа берет на себя заботу обо всем остальном.



<div class="button-bar">
  <ul class="button-group">
    <li><a href=
http://www.pixelcom.crimea.ua/"#" class="button">Button 1</a></li>
    <li><a href=
http://www.pixelcom.crimea.ua/"#" class="button">Button 2</a></li>
    <li><a href=
http://www.pixelcom.crimea.ua/"#" class="button">Button 3</a></li>
  </ul>

  <ul class="button-group">
    <li><a href=
http://www.pixelcom.crimea.ua/"#" class="button">Button 1</a></li>
    <li><a href=
http://www.pixelcom.crimea.ua/"#" class="button">Button 2</a></li>
    <li><a href=
http://www.pixelcom.crimea.ua/"#" class="button">Button 3</a></li>
  </ul>
</div>


Кнопки в группах или бара можно настроить индивидуально для конкретного типа (цвет) или размера. Очевидно, что если вы создаете кнопку на панели с кнопками разных размеров визуального представления могут пострадать немного, мы хотели, чтобы они были очень гибкими.

Кнопка с фоном

Любая из этих кнопок может быть с фоном, залитым градиентом или изображением, при простое или при наведении курсора. В стиле требуется указать вместо заливки сплошным цветом, залить градиентом:



background: #006699;
background:-moz-linear-gradient(#FFFFFF -40%, #006699 90%) repeat;
background:-webkit-linear-gradient(#FFFFFF -40%, #006699 90%) repeat;
background:-o-linear-gradient(#FFFFFF -40%, #006699 90%) repeat;
background:-ms-linear-gradient(#FFFFFF -40%, #006699 90%) repeat;
background:linear-gradient(#FFFFFF -40%, #006699 90%) repeat;


Градиент для :hover



background-color: #006699; 
background:-moz-linear-gradient(#006699 20%, #FFFFFF 130%); 
background:-webkit-linear-gradient(#006699 20%, #FFFFFF 130%); 
background:-o-linear-gradient(#006699 20%, #FFFFFF 130%); 
background:-ms-linear-gradient(#006699 20%, #FFFFFF 130%); 
background:linear-gradient(#006699 20%, #FFFFFF 130%);


37. Customizable Pressure Buttons in CSS3
Кнопки для сайта

Демо

36. Pretty CSS3 Buttons
Кнопки для сайта

Демо

35. Animated Buttons with CSS3
Кнопки для сайта

Демо

34. Just Some Awesome CSS3 Buttons
Кнопки для сайта

Демо

33. CSS3 Social Buttons
Кнопки для сайта

Демо

32. Fancy 3D Button with CSS3
Кнопки для сайта

Демо

31. Create A Sleek On/Off Button
Кнопки для сайта

Демо

30. CSS3 Github Buttons
Кнопки для сайта

Демо

29. Add to Cart Button in CSS3
Кнопки для сайта

Демо

28. CSS3 Buttons with Pseudo-Elements
Кнопки для сайта

Демо

27. CSS3 Animated Bubble Buttons
Кнопки для сайта

Демо

26. A Set of Simple CSS3 Buttons
Кнопки для сайта

Демо

25. Orman Clark’s Chunky 3D CSS3 Buttons
Кнопки для сайта

Демо

24. Pure CSS3 Social Media Icons
Кнопки для сайта

Демо

23. Create a Slick CSS3 Button
Кнопки для сайта

Демо

22. CSS3 Gradient Buttons with Pattern
Кнопки для сайта

Демо

21. Super Awesome Buttons in CSS3
Кнопки для сайта

Демо

20. Css3 Buttons with Icons
Кнопки для сайта

Демо

19. BonBon Sweet CSS3 Buttons
Кнопки для сайта

Демо

18. CSS3 Gradient Buttons
Кнопки для сайта

Демо

17. Animated CSS3 Buy Now Buttons
Кнопки для сайта

Демо

16. How to Make a Cool Pure CSS3 Button
Кнопки для сайта

Демо

15. Build Kick-Ass Practical CSS3 Buttons
Кнопки для сайта

Демо

14. Create Some Awesome CSS3 Buttons
Кнопки для сайта

Демо

13. Create a Circle Social Button in CSS3
Кнопки для сайта

Демо

12. Create an Awesome Blue Pill with Icon Button in CSS3
Кнопки для сайта

Демо

11. Create an Awesome Animated CSS3 Download Button
Кнопки для сайта

Демо

10. How to Create Social Media Icons using CSS3
Кнопки для сайта

Демо

9. How to Design a Sexy Button using Css3
Кнопки для сайта

Демо

8. Slicker Buttons with CSS3
Кнопки для сайта

Демо

7. Make CSS3 Buttons that are Extremely Fancy
Кнопки для сайта

Демо

6. CSS3 Buttons with Glass Edge
Кнопки для сайта

Демо

5. Pure CSS3 Web Button
Кнопки для сайта

Демо

4. Make CSS3 Buttons like a Boss
Кнопки для сайта

Демо

3. Creating CSS3 Buttons in Easy Way
Кнопки для сайта

Демо

2. Fading Button Background Images with CSS3
Кнопки для сайта

Демо

1. CSS3 Push-Down Buttons
Кнопки для сайта

Демо

Переключатели для сайта










HTML


<form action="#" method="get">

<var>
<input type="checkbox" id="switch1" name="switch1" class="switch" />
<label for="switch1">первый переключатель</label>
</var>

<var>
<input type="checkbox" id="switch2" name="switch2" class="switch" checked="checked" />
<label for="switch2">второй переключатель</label>
</var>

<var>
<input type="checkbox" id="switch3" name="switch3" class="switch" />
<label for="switch3">третий переключатель</label>
</var>


CSS


form
{
	margin: 40px 0;
}

var
{
	clear: both;
	margin: 0 50px;
}

input.switch:empty
{
	margin-left: -999px;
}

input.switch:empty ~ label
{
	position: relative;
	float: left;
	line-height: 1.6em;
	text-indent: 4em;
	margin: 0.2em 0;
	cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.switch:empty ~ label:before, 
input.switch:empty ~ label:after
{
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: ' ';
	width: 3.6em;
	background-color: #c33;
	border-radius: 0.3em;
	box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
	-webkit-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
}

input.switch:empty ~ label:after
{
	width: 1.4em;
	top: 0.1em;
	bottom: 0.1em;
	margin-left: 0.1em;
	background-color: #fff;
	border-radius: 0.15em;
	box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}

input.switch:checked ~ label:before
{
	background-color: #393;
}

input.switch:checked ~ label:after
{
	margin-left: 2.1em;
}


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://www.pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>