Css стили кнопок: Buttons Основные стили кнопок CSS уроки для начинающих академия

Создание 3D кнопок для с помощью CSS и jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

a.button {
    box-shadow:
        1px -1px 0 rgb(241,91,38),
        2px -2px 0 rgb(241,91,38),
        3px -3px 0 rgb(241,91,38),
        4px -4px 0 rgb(241,91,38),
        0 0 10px rgba(0,0,0,0.6);
        -webkit-box-shadow: /* Safari, Chrome */
            1px -1px 0 rgb(241,91,38),
            2px -2px 0 rgb(241,91,38),
            3px -3px 0 rgb(241,91,38),
            4px -4px 0 rgb(241,91,38),
            0 0 10px rgba(0,0,0,0.6);
        -moz-box-shadow: /* Firefox */
            1px -1px 0 rgb(241,91,38),
            2px -2px 0 rgb(241,91,38),
            3px -3px 0 rgb(241,91,38),
            4px -4px 0 rgb(241,91,38),
            0 0 10px rgba(0,0,0,0.6);
        -o-box-shadow: /* Opera */
            1px -1px 0 rgb(241,91,38),
            2px -2px 0 rgb(241,91,38),
            3px -3px 0 rgb(241,91,38),
            4px -4px 0 rgb(241,91,38),
            0 0 10px rgba(0,0,0,0.6);
    color: rgb(193,193,193);
    display: block;
    font-size: 12px;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}
a#tutorial-toggle {
    background: rgb(255,255,255);
    border-radius: 25px;
        -webkit-border-radius: 25px; /* Safari, Chrome */
        -moz-border-radius: 25px; /* Firefox */
        -o-border-radius: 25px; /* Opera */
    height: 30px;
    line-height: 30px;
    width: 30px;
}
    a.on {
        box-shadow:
            1px -1px 0 rgb(241,91,38),
            2px -2px 0 rgb(241,91,38),
            0 0 6px rgba(0,0,0,0.6);
            -webkit-box-shadow: /* Safari, Chrome */
                1px -1px 0 rgb(241,91,38),
                2px -2px 0 rgb(241,91,38),
                0 0 6px rgba(0,0,0,0.6);
            -moz-box-shadow: /* Firefox */
                1px -1px 0 rgb(241,91,38),
                2px -2px 0 rgb(241,91,38),
                0 0 6px rgba(0,0,0,0.6);
            -o-box-shadow: /* Opera */
                1px -1px 0 rgb(241,91,38),
                2px -2px 0 rgb(241,91,38),
                0 0 6px rgba(0,0,0,0.6);
        color: rgb(0,0,0);
        margin: -2px -2px 2px 2px;
    }
    a.button:active,
    a.on:active {
        box-shadow:
            1px -1px 0 rgb(241,91,38),
            0 0 3px rgba(0,0,0,0.3);
            -webkit-box-shadow: /* Safari, Chrome */
                1px -1px 0 rgb(241,91,38),
                0 0 3px rgba(0,0,0,0.3);
            -moz-box-shadow: /* Firefox */
                1px -1px 0 rgb(241,91,38),
                0 0 3px rgba(0,0,0,0.3);
            -o-box-shadow: /* Opera */
                1px -1px 0 rgb(241,91,38),
                0 0 3px rgba(0,0,0,0.3);
        margin: -3px -3px 3px 3px;
    }

CSS3 кнопки в стиле FLAT

07 июня 2016. Категория: Готовые CSS3 кнопки

Очередная подборка CSS3 кнопок в очень популярном на сегодняшнее время стиле FLAT. Данный минималистичный стиль веб-дизайна выражает максимальную простоту, утончённость и лаконичность одновременно. В его основу ложится двумерный стиль, который веб-дизайнеры называют «плоским дизайном» (собственно говоря, слово FLAT так и переводится с английского — «плоский»)

Примеры FLAT кнопок

Рассмотрим несколько вариантов реализации FLAT кнопки, используя чистый CSS.

Пример №1

Красная flat кнопка Зеленая flat кнопка Синяя flat кнопка

Пример №2

Бирюзовая flat кнопка Темно-фиолетовая flat кнопка

Пример №3

Оранжевая flat кнопка Серая flat кнопка

HTML разметка FLAT кнопок

HTML разметка у всех кнопок максимальна проста и практически одинакова, изменяются лишь классы, определяющие оформление кнопки.

/*Пример №1*/
<a href="#">Красная flat кнопка</a>
/*Пример №2*/
<a href="#">Бирюзовая flat кнопка</a>
/*Пример №3*/
<a href="#">Оранжевая flat кнопка</a>

CSS стили FLAT кнопок

Рассмотрим CSS стили каждого первого варианта кнопки из всех трех примеров.

CSS стили первого примера

.flat1 {
	padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
	font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
	text-transform: uppercase; //преобразование текста в заглавные символы
	-webkit-user-select: none;
	border: none;
	text-align: center; //текст кнопки по центру
	outline: none;
	cursor: pointer;
	color: #fff; //цвет текста кнопки в статичном виде
	background-color: #f35958; //цвет кнопки в статичном виде
	display: inline-block;
	/*Тени кнопки в статичном виде*/
	-webkit-box-shadow: 0px 3px 0px #c24746;
	-moz-box-shadow: 0px 3px 0px #c24746;
	box-shadow: 0px 3px 0px #c24746;
	}
	
.flat1:hover {
	background-color: #e65453; //цвет кнопки при наведении
	color: #fff; //цвет текста кнопки при наведении
	border: none;
	}
	
.flat1:active {
	/*Тени кнопки при нажатии*/
	-webkit-box-shadow: 0px 1px 0px #f35958;
	-moz-box-shadow: 0px 1px 0px #f35958;
	box-shadow: 0px 1px 0px #f35958;
	position: relative;
	top: 2px;
	background-color: #e65453; //цвет кнопки при нажатии
	color: #fff; //цвет текста кнопки при нажатии
	}

CSS стили второго примера

.flat2 {
	padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
	font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
	text-transform: uppercase; //преобразование текста в заглавные символы
	border: none;
	color: #fff; //цвет текста кнопки в статичном виде
	background-color: #1ABC9C; //цвет кнопки в статичном виде
	-webkit-transition:border .25s linear, color .25s linear,background-color .25s linear;
	transition:border .25s linear, color .25s linear,background-color .25s linear;
	-webkit-font-smoothing: subpixel-antialiased;
	text-align: center; //текст кнопки по центру
	cursor: pointer;
	-webkit-user-select: none;
	display: inline-block;
	}
	
.flat2:hover {
	color: #fff; //цвет текста кнопки при наведении
	background-color: #20D5B1; //цвет кнопки при наведении
	border: none;
	}
	
.flat2:active {
	color: #fff; //цвет текста кнопки при нажатии
	background-color: #179B81; //цвет кнопки при нажатии
	border: none;
	}	

CSS стили третьего примера

.flat-type3 {
	padding: 15px 24px; //отступы, отвечающие за размеры кнопки (в пикселях)
	font: normal 15px/22px Verdana; //тип, размер, межстрочный интервал и вид шрифта
	text-transform: uppercase; //преобразование текста в заглавные символы
	color: #E57332; //цвет текста кнопки в статичном виде
	border: 2px solid #E57332; //размер и цвет рамки/обводки кнопки в статичном виде
	border-radius: 5px; //скругление углов кнопки (в пикселях)
	background-color: #fff; //цвет кнопки в статичном виде
	-webkit-transition:border .25s linear, color .25s linear,background-color .25s linear;
	transition:border .25s linear, color .25s linear,background-color .25s linear;
	-webkit-font-smoothing: subpixel-antialiased;
	text-align: center; //текст кнопки по центру
	cursor: pointer;
	-webkit-user-select: none;
	display: inline-block;
	}
	
.flat3:hover {
	color: #fff; //цвет текста кнопки при наведении
	background-color: #E57332; //цвет кнопки при наведении
	border: 2px solid #E57332; //размер и цвет рамки/обводки кнопки при наведении
	}
	
.flat3:active {
	color: #fff; //цвет текста кнопки при нажатии
	background-color: #FF813A; //цвет кнопки при нажатии
	border: 2px solid #FF813A; //размер и цвет рамки/обводки кнопки при нажатии
	}

Создание сияющих кнопок с использованием CSS

Так как кнопки играют важную роль в вызове функций на веб-сайте, важно, чтобы они производили эффект на посетителей. Этого можно добиться разными способами, в этом уроке мы рассмотрим, как с помощью CSS3 создать эффектные кнопки. Мы воспользуемся свойствами тени блока CSS, радиуса границы CSS и анимациями CSS, чтобы создать кнопки, сияющие при наведении указателя мыши. 

Вот пример кнопок, которые мы создадим:

Пожалуйста, посмотрите пример того, что мы будем создавать в этом уроке. Наведите указатель мыши на кнопки, чтобы увидеть эффекты анимации CSS.

Демонстрация работы

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

Код HTML 

Для начала мы добавим странице код HTML:

<a href="#"><div></div>Click Here</a>
<a href="#"><div></div>Click Here</a>
<a href="#"><div></div>Click Here</a>
<a href="#"><div></div>Click Here</a>
<a href="#"><div></div>Click Here</a>
<a href="#"><div></div>Click Here</a>
<a href="#"><div></div>Click Here</a>
<a href="#"><div></div>Click Here</a>
<a href="#"><div></div>Click Here</a>

Стоит отметить, что в находящемся выше коде HTML используются классы для ссылок. У всех кнопок есть класс button (кнопка), чтобы у них всех были одинаковые свойства, нужные для кнопок. А чтобы они выглядели по-разному, добавлен класс, который изменяет цвет кнопок.

У каждой кнопки также есть блок, вложенный в ссылку, класса light (свечение), который придает сияние кнопке, о нем будет подробно рассказано далее.

Стили CSS 

CSS – это основная тема этого урока, и в ней много информации, так что мы разделим ее на пять частей: общие свойства, цвета, тени блока при наведении указателя мыши, события при нажатии и анимация свечения.

Сначала рассмотрим сами кнопки, все они используют класс CSS button, который задает размеры. Цвет фона задается другим классом CSS, называющимися как соответствующий цвет.

Общие стили кнопок

.button{
	height:2em;
	padding:15px 50px;
	margin:20px 40px;
	cursor:pointer;
	display:inline-block;
	color:#FFF;
	font-size:1em;
	border:1px solid #eee;
	background:#eee;
	border-radius:4px;
	line-height:2em;
	border:1px solid #aaa;
	text-decoration:none;
	-webkit-transition: all 0.3s linear;
     -khtml-transition: all 0.3s linear;
       -moz-transition: all 0.3s linear;
         -o-transition: all 0.3s linear;
            transition: all 0.3s linear;
} 

Как видите, при помощи кода CSS выше задается высота и внутренние отступы кнопки. Еще с помощью класса CSS button устанавливается свойство переходов CSS, которое используется, чтобы при наведении указателя мыши появилась тень блока.

Цвета кнопки

Следующий код — это градиенты фона CSS, используемые для всех кнопок:

/*********************************************************************** * Green Background **********************************************************************/
.green{
	background: #cdeb8e; /* Old browsers */
	background: -moz-linear-gradient(top, #cdeb8e 0%, #a5c956 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* IE10+ */
	background: linear-gradient(top, #cdeb8e 0%,#a5c956 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */
}

/*********************************************************************** * Red Background **********************************************************************/
.red{
	background: #ff3019; /* Old browsers */
	background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
	background: linear-gradient(top, #ff3019 0%,#cf0404 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}

/*********************************************************************** * Yellow Background **********************************************************************/
.yellow{
	background: #ffd65e; /* Old browsers */
	background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* IE10+ */
	background: linear-gradient(top, #ffd65e 0%,#febf04 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
}

/*********************************************************************** * Grey Background **********************************************************************/
.grey{
	background: rgb(238,238,238); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
	background: linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */
}

/*********************************************************************** * Black Background **********************************************************************/
.black{
	background: #7d7e7d; /* Old browsers */
	background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
	background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}

/*********************************************************************** * Brown Background **********************************************************************/
.brown{
	background: #f6e6b4; /* Old browsers */
	background: -moz-linear-gradient(top, #f6e6b4 0%, #ed9017 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* IE10+ */
	background: linear-gradient(top, #f6e6b4 0%,#ed9017 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */
}

/*********************************************************************** * Blue Background **********************************************************************/
.blue{
	background: #7abcff; /* Old browsers */
	background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
	background: linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}

/*********************************************************************** * Dark Red Background **********************************************************************/
.darkred{
	background: rgb(169,3,41); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(169,3,41,1)), color-stop(44%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* IE10+ */
	background: linear-gradient(left, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 */
}
/*********************************************************************** * Purple Background **********************************************************************/
.purple{
	background: rgb(203,96,179); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(203,96,179,1) 0%, rgba(173,18,131,1) 50%, rgba(222,71,172,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(203,96,179,1)), color-stop(50%,rgba(173,18,131,1)), color-stop(100%,rgba(222,71,172,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* IE10+ */
	background: linear-gradient(left, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=1 ); /* IE6-9 */
} 

Событие при наведении указателя мышиПри наведении указателя мыши на кнопку добавится тень блока, чтобы кнопка выглядела высовывающейся. Для добавления тени блока, используйте следующий код CSS:

.button:hover{
	-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
     -khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
       -moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
         -o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
            box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
} 

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

Добавьте следующий код CSS:

.button:active {
    -webkit-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
     -khtml-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
       -moz-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
         -o-box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
            box-shadow: rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
    text-shadow:1px 1px 1px #eee;
} 

СияниеВ этой части урока мы рассмотрим анимацию сияния кнопки, которая появится на кнопке и будет вращаться с левой стороны кнопки на правую.

Для создания этого эффекта воспользуемся анимациями CSS, чтобы добавить событие, которое изменяет блок сияния в разных ключевых кадрах.

Для начала нам нужно, чтобы блок выглядел, как сияние света, для этого мы воспользуемся фоновым градиентом CSS, который начинается ярко в средине и угасает к краям блока:

.light {
    display: block;
    position: relative;
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.9)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    padding: 1px 9px;
    top: -16px;
    left: -53px;
    height: 0px;
} 

Этот код разместит сияние на верхней части кнопки, а теперь добавим анимацию, запускающуюся при наведении указателя мыши, блоку класса light кнопки.

.button:hover .light{

	padding:1px 5px;

    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    -khtml-animation-name: shine;
    -khtml-animation-duration: 0.6s;
    -khtml-animation-timing-function: linear;
    -moz-animation-name: shine;
    -moz-animation-duration: 0.6s;
    -moz-animation-timing-function: linear;
    -o-animation-name: shine;
    -o-animation-duration: 0.6s;
    -o-animation-timing-function: linear;
    -webkit-animation-name: shine;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    left:45px;
}

@-webkit-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -webkit-transform: rotate(-360deg); }
}

@-khtml-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -khtml-transform: rotate(-360deg); }
}

@-moz-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -moz-transform: rotate(-360deg); }
}

@-o-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; -o-transform: rotate(-360deg); }
}
@-keyframes shine {
    0% { top: -15px; left: -48px; }
    10% { top: -5px; }
    20% { top: 5px; }
    30% { top: 15px; }
    40% { top: 25px; }
    50% { top: 35px; }
    60% { top: 25px; }
    70% { top: 15px; }
    80% { top: 5px; }
    90% { top: -5px; }
    100% { top:-15px; left:45px; transform: rotate(-360deg); }
}

Это все, что нужно для создания такого эффекта.

Посмотрите пример, чтобы увидеть, как это работает.

Демонстрация работы

Автор урока Paul Underwood

Перевод — Дежурка

Смотрите также:

Стили CSS | Bootstrap по-русски

Заголовки

Доступны все HTML заголовки, от <h2> до <h6>.

h3. Заголовок 2

h4. Заголовок 3

h5. Заголовок 4

h5. Заголовок 5

h6. Заголовок 6

Размеры Body

В Bootstrap основной размер шрифта font-size по умолчанию 14px, с высотой строки line-height в 20px. Это применимо к <body> и всем остальным абзацам. Дополнительно <p> (абзац) имеет нижний отступ, равный половине высоты его строки (по умолчанию 10px).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Класс Lead body

Выделяйте абзац путем добавления .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p>...</p>

Форматирование Less

Все шрифты и размеры основаны на двух переменных LESS в variables.less: @baseFontSize и @baseLineHeight. Первая — это основной размер шрифта, используемый во всем документе, вторая — это основная высота строки. Мы используем эти переменные и немного вычислений, чтобы создать отступы, поля, высоту строк разного типа и многое другое. Настраивайте Bootstrap для себя.

Выделение

Используя простые стили Bootstrap, применяйте HTML теги для выделения.

<small>

Для выделения блоков текста мелким шрифтом используйте тег small.

Эта строка текста предназначена для того, чтобы показать, как выглядит мелкий шрифт

<p>
  <small>Эта строка текста предназначена для того, чтобы показать, как выглядит мелкий шрифт.</small>
</p>

Полужирный

Выделение фрагмента текста с помощью important

Следующий фрагмент текста набран полужирным шрифтом.

<strong>набран полужирным шрифтом</strong>

Курсив

Выделение фрагмента текста с помощью stress

Следующий фрагмент текста выделен курсивом.

<em>выделен курсивом</em>

Внимание! Смело используйте <b> и <i> в HTML5. Но <b> предназначен для выделения слова или фразы, которое не выражает особой важности, в то время как <i> используется для выделения разговорной речи, технических терминов и т.д.

Классы выделения

Выделение цветом с помощью нескольких вспомогательных классов.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p>Etiam porta sem malesuada magna mollis euismod.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Аббревиатуры

Используйте элемент HTML <abbr> для аббревиатур. При этом наведите курсор на аббревиатуру, чтобы увидеть ее расшифровку. Аббревиатуры с атрибутом title выделены полупрозрачным подчеркиванием точками, а при длительном наведении курсора вы увидите знак вопроса и расшифровку аббревиатуры.

<abbr>

Чтобы показать расшифровку аббревиатуры при длительном наведении курсора, добавьте атрибут title.

Аббревиатура слова «attribute» — attr.

<abbr title="attribute">attr</abbr>

<abbr>

Добавьте .initialism, чтобы немного уменьшить размер шрифта.

HTML — это круче вареного яйца.

<abbr title="HyperText Markup Language">HTML</abbr>

Адреса

Представьте или только основную или полную контактную информацию.

<address>

Сохраните форматирование, ставя в конце всех строк тег <br>.

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
 
<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@gmail.com</a>
</address>

Цитаты

Цитирование фрагментов текста из других источников.

Цитаты по умолчанию

Цитата HTML ставится внутрь тега <blockquote>. Для однострочных цитат используйте тег <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Опции цитирования

Простые изменения стиля и содержания в стандартных цитатах.

Указание источника

Добавьте тег <small> для указания на источник. Поместите название источника внутрь тега <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то очень известный в Названии источника

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small>Кто-то очень известный в <cite title="Source Title">Названии источника</cite></small>
</blockquote>

Альтернативное отображение

Используйте .pull-right для выравнивания текста по правую сторону.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Кто-то очень известный в Названии источника

<blockquote>
  ...
</blockquote>

Списки

Неупорядоченный

Список, в котором порядок явно не обозначен.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

Упорядоченный

Список, в котором порядок четко определен.

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Не стилизованный

Список без стиля или без дополнительного левого поля.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

Описание

Список терминов с их сопутствующими описаниями.

Списки описаний

Список описания идеально подходит для определения терминов.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Горизонтальный список описания

Выстраивает термины и описания <dl> в одну линию.

Списки описания

Список описания идеально подходит для обозначения терминов.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Felis euismod semper eget lacinia

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Внимание! В горизонтальных списках описания слишком длинные термины будут обрезаться с помощью text-overflow. На малых дисплеях размеры списков будут изменяться в соответствии с сеткой шаблона.

Строковое выделение кода

Поместите строковый код внутрь тега <code>.

Для примера, <section> следует поместить внутрь как строковый.

Для примера,<code><section></код> следует поместить внутрь как строковый.

Блочное выделение

Используйте <pre> для выделения многих строк кода. Избегайте угловых скобок в коде для его корректного отображения.

<p>Sample text here...</p>

<pre>
  &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

Внимание! Всегда используйте теги <pre> как можно левее; это сохранит все отступы. Дополнительно вы можете использовать класс .pre-scrollable, который имеет максимальную высоту в 350px  и добавляет вертикальную прокрутку.

Стили по умолчанию

Для основного форматирования и только горизонтальной разметки добавьте класс .table в любой тег <table>.

<table>
  …
</table>

Дополнительные классы

Добавьте любой из следующих классов к основному классу .table.

.table-striped

Добавить светло-серый фон к нечетным строкам внутри <tbody> можно посредством CSS селектора :nth-child (в IE7-IE8 не поддерживается).

<table>
  …
</table>

.table-bordered

Добавляет рамки и закругляет углы таблицы.

<table>
  …
</table>

.table-hover

Делает активным наведение курсора внутри.

<table>
  …
</table>

.table-condensed

Делает таблицы более компактными, наполовину сокращая отступы.

<table>
  …
</table>

Дополнительные классы строк

Используйте контекстные классы, чтобы выделить цветом строки таблицы.

...
  <tr>
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

Поддерживаемая разметка таблиц

Список поддерживаемых элементов HTML и указания для их использования.

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Стили по умолчанию

Отдельные элементы формы имеют свой стиль, но без обязательного класса <form> или каких-либо особых изменений в разметке. В результате получаются упорядоченный, выровненный по левому краю текст в элементах формы.

<form>
  <legend>Условные обозначения</legend>
  <label>Название</label>
  <input type="text" placeholder="Type something…">
  <span>Это пример вспомогательного текста.</span>
  <label>
    <input type="checkbox"> Проверить
  </label>
  <button type="submit">Подтвердить</button>
</form>

Дополнительные шаблоны

В Bootstrap есть три дополнительных шаблона форм для общего пользования.

Форма поиска

Добавьте .form-search в форму и .search-query в элемент <input> для построения закругленной рамки.

<form>
  <input type="text">
  <button type="submit">Search</button>
</form>

Линейная форма

Добавьте класс .form-inline для компактного расположения выровненного по левому краю текста и строк.

<form>
  <input type="text" placeholder="Email">
  <input type="password" placeholder="Password">
  <label>
    <input type="checkbox"> Запомнить
  </label>
  <button type="submit">Отправить</button>
</form>

Горизонтальная форма

Выровняйте текст по правой стороне, ставя обтекание слева, чтобы он находился на одной линии с элементами формы:

• Добавьте .form-horizontal в форму
• Добавьте текст и элементы управления внутрь .control-group
• Добавьте .control-label в текст
• Добавьте любой подходящий элемент управления .controls для точной настройки

<form>
  <div>
    <label for="inputEmail">Email</label>
    <div>
      <input type="text" placeholder="Email">
    </div>
  </div>
  <div>
    <label for="inputPassword">Password</label>
    <div>
      <input type="password" placeholder="Password">
    </div>
  </div>
  <div>
    <div>
      <label>
        <input type="checkbox"> Remember me
      </label>
      <button type="submit">Sign in</button>
    </div>
  </div>
</form>

Поддерживаемые элементы формы

Примеры стандартных поддерживаемых элементов формы.

Поле ввода

Самый простой элемент формы с текстовыми полями ввода. Поддерживает все типы HTML5: текст, пароль, text, password, время и дата, региональные настройки времени и даты, дата, месяц, время, неделя, номер, электронная почта, URL, поиск, номер телефона и цвет.

Всякий раз обязательно используйте нужный тип type.

<input type="text" placeholder="Text input">

Многострочный текст

Для элементов формы, которые позволяют использовать многострочный текст. Измените атрибут rows в случае необходимости.

<textarea rows="3"></textarea>

Флажки и радио-кнопки

Элементы «флажки» (чек-боксы) используются для выбора одной или нескольких опций в списке, а радио-кнопки предназначены только для выбора одной опции из нескольких.

По умолчанию (вертикально)

<label>
  <input type="checkbox" value="">
   А вот вам опция номер один - очень крутая штука.
</label>
 
<label>
  <input type="radio" name="optionsRadios" value="option1" checked>
   А вот вам опция номер один - очень крутая штука.
</label>
<label>
  <input type="radio" name="optionsRadios" value="option2">
  Опция два - это нечто другое. Выбрав ее, отменяете первую.
</label>

Флажки в одной строке

Добавьте класс .inline к нескольким флажкам или радио-кнопкам, чтобы разместить их на одной линии.

<label>
  <input type="checkbox" value="option1"> 1
</label>
<label>
  <input type="checkbox" value="option2"> 2
</label>
<label>
  <input type="checkbox" value="option3"> 3
</label>

Список выбора

Используйте опцию по умолчанию или укажите multiple="multiple", чтобы отобразить сразу несколько опций.

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
 
<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Дополнения к формам

В Bootstrap имеются также другие полезные компоненты формы, которые могут встраиваться в панель браузера.

Пред-идущие и Пост-идущие элементы

Добавьте текст или кнопки до или после поля текстового ввода. Обратите внимание, что элементы select при этом не поддерживаются.

Настройки по умолчанию

Добавьте один или два класса внутрь тегов .add-on и input, чтобы отобразить текст до или после поля ввода.

<div>
  <span>@</span><input size="16" type="text" placeholder="Username">
</div>
<div>
  <input size="16" type="text"><span>.00</span>
</div>

Комбинирование

Используйте оба класса и дважды — .add-on, чтобы отобразить текст впереди или позади.

<div>
  <span>$</span><input size="16" type="text"><span>.00</span>
</div>

Кнопки вместо текста

Используйте с текстом вместо <span> класс .btn, чтобы к вводу подключить кнопку.

<div>
  <input size="16" type="text"><button type="button">Go!</button>
</div>
 
<div>
  <input size="16" type="text"><button type="button">Search</button><button type="button">Options</button>
</div>

Форма поиска

<form>
  <div>
    <input type="text">
    <button type="submit">Search</button>
  </div>
  <div>
    <button type="submit">Search</button>
    <input type="text">
  </div>
</form>

Настройка размеров

Используйте соответствующие классы, такие как .input-large или согласуйте ваше поле ввода с сеткой размеров, используя классы .span*.

Взаимосвязанные размеры

<input type="text" placeholder=".input-mini">
<input type="text" placeholder=".input-small">
<input type="text" placeholder=".input-medium">
<input type="text" placeholder=".input-large">
<input type="text" placeholder=".input-xlarge">
<input type="text" placeholder=".input-xxlarge">

Внимание! В дальнейших версиях мы изменим использование этих взаимосвязанных классов ввода, чтобы согласовать размер кнопок. Например, .input-large будет увеличивать отступ и размер шрифта в поле ввода.

Сетка размеров

Используйте от .span1 до .span12, чтобы задать одинаковые размеры в поле ввода и в сетке столбцов.

<input type="text" placeholder=".span1">
<input type="text" placeholder=".span2">
<input type="text" placeholder=".span3">
<select>
  ...
</select>
<select>
  ...
</select>
<select>
  ...
</select>

Для множественного ввода используйте класс модификатора .controls-row для корректного отображения пробелов. Это позволяет убрать лишние пробелы при обтекании, настраивает соответствующие поля и прозрачность обтекания.

<div>
  <input type="text" placeholder=".span5">
</div>
<div>
  <input type="text" placeholder=".span4">
  <input type="text" placeholder=".span1">
</div>
...

Неформатируемые поля

Представьте данные в форме, которая не редактируется без использования фактической разметки.

<span>Some value here</span>

Формы для действий

Добавьте в конец формы действие (кнопки). Расположенные внутри класса .form-horizontal, кнопки автоматически получат отступ, соответствующий форме.

<div>
  <button type="submit">Сохранить изменения</button>
  <button type="button">Отмена</button>
</div>

Вспомогательный текст

Поддержка строчного и блокового текста, который отображается около управления формы.

Строчный вспомогательный текст

<input type="text"><span>Inline help text</span>

Блоковый вспомогательный текст

<input type="text"><span>Слишком большой блок вспомогательного текста переносится на новую строку и может продолжиться более, чем на одну строку.</span>

Настройки состояния элементов формы

Обеспечивают обратную связь с пользователями или посетителями.

Фокус ввода

Мы удалили стили по умолчанию outline в настройках некоторых форм и поставили на их место box-shadow для фокуса :focus.

<input type="text" value="This is focused...">

Отключенное состояние

Добавьте атрибут disabled в поле ввода для того, чтобы предотвратить ввод. Внешний вид поля при этом немного изменится.

<input type="text" placeholder="Disabled input here..." disabled>

Состояния валидации

В Bootstrap имеются стили валидации для ошибок, предупреждений, информации и успешных действий. Для использования добавьте подходящий класс к ближайшему классу .control-group.

<div>
  <label for="inputWarning">Предупреждение</label>
  <div>
    <input type="text">
    <span>Что-то идет не так</span>
  </div>
</div>
<div>
  <label for="inputError">Ошибка</label>
  <div>
    <input type="text">
    <span>Пожалуйста, исправьте ошибку</span>
  </div>
</div>
<div>
  <label for="inputSuccess">Выполнено успешно</label>
  <div>
    <input type="text">
    <span>Урааа!</span>
  </div>
</div>

Кнопки по умолчанию

Стили кнопок могут применяться к любым элементам посредством класса .btn. Однако, обычно применяйте их только к элементам <a> and <button> для лучшего отображения.

Кросс-браузерная совместимость

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

Размеры кнопок

Желаете кнопки побольше или поменьше? Добавьте класс .btn-large, .btn-small, или .btn-mini для установки дополнительных размеров.

Большая кнопка Большая кнопка

Кнопка по умолчанию Кнопка по умолчанию

Маленькая кнопка Маленькая кнопка

Мини-кнопка Мини-кнопка

<p>
  <button type="button">Большая кнопка</button>
  <button type="button">Большая кнопка</button>
</p>
<p>
  <button type="button">Кнопка по умолчанию</button>
  <button type="button">Кнопка по умолчанию</button>
</p>
<p>
  <button type="button">Маленькая кнопка</button>
  <button type="button">Маленькая кнопка</button>
</p>
<p>
  <button type="button">Мини-кнопка</button>
  <button type="button">Мини-кнопка</button>
</p>

Создайте вложенный блок кнопок, который размещается по всей ширине родительских кнопок. Для этого добавьте класс .btn-block.

Вложенная кнопка
Вложенная кнопка

<button type="button">Вложенная кнопка</button>
<button type="button">Вложенная кнопка</button>

Отключенное состояние

Отмените нажатие кнопок, уменьшив их четкость на 50%.

Анкерный элемент

Добавьте класс .disabled к кнопкам <a>.

Исходная ссылка Ссылка

<a href="#">Исходная ссылка</a>
<a href="#">Ссылка</a>

Внимание!
Мы используем класс .disabled как дополнение к классу, подобно общему классу .active, так что никакой префикс не требуется. Также этот класс по сути только для внешнего вида — для того, чтобы сделать ссылку неактивной, используйте JavaScript.

Элемент кнопки

Добавьте атрибут disabled к кнопкам <button>.

Главная кнопка Кнопка

<button type="button" disabled="disabled">Главная кнопка</button>
<button type="button" disabled>Кнопка</button>

Один класс, множественные теги

Используйте класс .btn в элементах <a>, <button> или <input>.

<a href="">Ссылка</a>
<button type="submit">Кнопка</button>
<input type="button" value="Input">
<input type="submit" value="Submit">

Для наилучшей совместимости с браузерами, используйте элементы, подходящие для всех браузеров. Используйте input как кнопку <input type="submit">.

Добавьте классы к элементу <img>, чтобы легко настроить стили изображений.

<img src="...">
<img src="...">
<img src="...">

Внимание! .img-rounded и .img-circle не работают в IE7-8 из-за недостаточной поддержки border-radius.

Иконки glyphs

140 иконок в едином файле, по умолчанию в темно-сером и белом цвете. Предоставлены Glyphicons.

• icon-glass
• icon-music
• icon-search
• icon-envelope
• icon-heart
• icon-star
• icon-star-empty
• icon-user
• icon-film
• icon-th-large
• icon-th
• icon-th-list
• icon-ok
• icon-remove
• icon-zoom-in
• icon-zoom-out
• icon-off
• icon-signal
• icon-cog
• icon-trash
• icon-home
• icon-file
• icon-time
• icon-road
• icon-download-alt
• icon-download
• icon-upload
• icon-inbox
• icon-play-circle
• icon-repeat
• icon-refresh
• icon-list-alt
• icon-lock
• icon-flag
• icon-headphones
• icon-volume-off
• icon-volume-down
• icon-volume-up
• icon-qrcode
• icon-barcode
• icon-tag
• icon-tags
• icon-book
• icon-bookmark
• icon-print
• icon-camera
• icon-font
• icon-bold
• icon-italic
• icon-text-height
• icon-text-width
• icon-align-left
• icon-align-center
• icon-align-right
• icon-align-justify
• icon-list
• icon-indent-left
• icon-indent-right
• icon-facetime-video
• icon-picture
• icon-pencil
• icon-map-marker
• icon-adjust
• icon-tint
• icon-edit
• icon-share
• icon-check
• icon-move
• icon-step-backward
• icon-fast-backward
• icon-backward
• icon-play
• icon-pause
• icon-stop
• icon-forward
• icon-fast-forward
• icon-step-forward
• icon-eject
• icon-chevron-left
• icon-chevron-right
• icon-plus-sign
• icon-minus-sign
• icon-remove-sign
• icon-ok-sign
• icon-question-sign
• icon-info-sign
• icon-screenshot
• icon-remove-circle
• icon-ok-circle
• icon-ban-circle
• icon-arrow-left
• icon-arrow-right
• icon-arrow-up
• icon-arrow-down
• icon-share-alt
• icon-resize-full
• icon-resize-small
• icon-plus
• icon-minus
• icon-asterisk
• icon-exclamation-sign
• icon-gift
• icon-leaf
• icon-fire
• icon-eye-open
• icon-eye-close
• icon-warning-sign
• icon-plane
• icon-calendar
• icon-random
• icon-comment
• icon-magnet
• icon-chevron-up
• icon-chevron-down
• icon-retweet
• icon-shopping-cart
• icon-folder-close
• icon-folder-open
• icon-resize-vertical
• icon-resize-horizontal
• icon-hdd
• icon-bullhorn
• icon-bell
• icon-certificate
• icon-thumbs-up
• icon-thumbs-down
• icon-hand-right
• icon-hand-left
• icon-hand-up
• icon-hand-down
• icon-circle-arrow-right
• icon-circle-arrow-left
• icon-circle-arrow-up
• icon-circle-arrow-down
• icon-globe
• icon-wrench
• icon-tasks
• icon-filter
• icon-briefcase
• icon-fullscreen

Авторство Glyphicons

Набор иконок Glyphicons Halflings не является бесплатным, но по соглашению между Bootstrap и Glyphicons разработчики имеют возможность использовать его без дополнительной платы. В знак благодарности мы просим вас разместить ссылку на оригинал проекта Glyphicons.

Как использовать

Все иконки требуют использования тега <i> с уникальным классом и префиксом icon-. Для использования поместите код с примера ниже в нужное место:

<i></i>

Также иконки могут использоваться в белом цвете (в виде инверсии), и доступны при дополнительном классе. Этот класс применяется при наведении курсора, активных состояний, навигации и раскрывающихся ссылок.

<i></i>

Внимание! При использовании с текстом, кнопками, ссылками или навигацией не забудьте оставить пробел после тега <i> для корректного расположения элемента.

Примеры иконок

Используйте иконки для кнопок, пунктов меню, навигации или присоедините к формам ввода.

Кнопки

Группа кнопок в меню

<div>
  <div>
 
    <a href="#"><i></i></a>
    <a href="#"><i></i></a>
    <a href="#"><i></i></a>
    <a href="#"><i></i></a>
  </div>
</div>

Кнопки с выпадающим списком

<div>
  <a href="#"><i></i> Пользователь</a>
  <a data-toggle="dropdown" href="#"><span></span></a>
  <ul>
    <li><a href="#"><i></i> Редактировать</a></li>
    <li><a href="#"><i></i> Удалить</a></li>
    <li><a href="#"><i></i> Запретить</a></li>
    <li></li>
    <li><a href="#"><i></i> Назначить администратором</a></li>
  </ul>
</div>

Маленькая кнопка

<a href="#"><i></i></a>

Навигация

<ul>
  <li><a href="#"><i></i> Домой</a></li>
  <li><a href="#"><i></i> Библиотека</a></li>
  <li><a href="#"><i></i> Приложения</a></li>
  <li><a href="#"><i></i> Дополнительно</a></li>
</ul>

Поля формы

<div>
  <label for="inputIcon">Адрес электронной почты</label>
  <div>
    <div>
      <span><i></i></span>
      <input type="text">
    </div>
  </div>
</div>

Эффектные кнопки CSS3 с анимацией иконок

.a-btn{

    background: linear-gradient(top, #a9db80 0%,#96c56f 100%);

    padding-left: 90px;

    padding-right: 105px;

    height: 90px;

    display: inline-block;

    position: relative;

    border: 1px solid #80ab5d;

    box-shadow:

        0px 1px 1px rgba(255,255,255,0.8) inset,

        1px 1px 3px rgba(0,0,0,0.2);

    border-radius: 4px;

    float: left;

    clear: both;

    margin: 10px 0px;

    overflow: hidden;

    transition: box-shadow 0.3s ease-in-out;

}

.a-btn img{

    position: absolute;

    left: 15px;

    top: 13px;

    border: none;

    transition: all 0.3s ease-in-out;

}

.a-btn .a-btn-slide-text{

    position: absolute;

    font-size: 36px;

    top: 18px;

    left: 18px;

    color: #6d954e;

    opacity: 0;

    text-shadow: 0px 1px 1px rgba(255,255,255,0.4);

    transition: opacity 0.2s ease-in-out;

}

.a-btn-text{

    padding-top: 13px;

    display: block;

    font-size: 30px;

    text-shadow: 0px -1px 1px #80ab5d;

}

.a-btn-text small{

    display: block;

    font-size: 11px;

    letter-spacing: 1px;

}

.a-btn-icon-right{

    position: absolute;

    right: 0px;

    top: 0px;

    height: 100%;

    width: 80px;

    border-left: 1px solid #80ab5d;

    box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;

}

.a-btn-icon-right span{

    width: 38px;

    height: 38px;

    opacity: 0.7;

    border-radius: 20px;

    position: absolute;

    left: 50%;

    top: 50%;

    margin: -20px 0px 0px -20px;

    border: 1px solid rgba(0,0,0,0.5);

    background: #4e5c50 url(../images/arrow_down.png) no-repeat center center;

    box-shadow:

        0px 1px 1px rgba(255,255,255,0.3) inset,

        0px 1px 2px rgba(255,255,255,0.5);

    transition: all 0.3s ease-in-out;

}

Индивидуальный стиль каждой кнопке навигации при помощи псевдокласса

Сегодня я покажу Вам, как можно придать индивидуальный стиль для каждой кнопки навигации при этом не присваивая каждой кнопке отдельный класс. Сделать это становится возможным при помощи псевдокласса, появившегося в CSS3 – nth-child(). При этом Ваш html-код останется не загроможденным большим количеством классов, а реализация самой задачи становится до смешного простой.

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

Давайте начнем.

Индивидуальный стиль каждой кнопки с псевдоклассом nth-child()

1.Первым делом мы создадим html5-файл. Код его будет достаточно простым, потому что файл будет содержать только заголовок и саму навигацию.

Также мы сразу подключим таблицу стилей, которую создадим в следующем шаге.

Вот этот простой код нашего html-файла:

<!doctype html>
<html>
<head>
<meta charset="windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Разноцветная навигация</title>
</head>
<body>
<h2>WebSite</h2>
<nav>
<a href="#">HOME</a>
<a href="#">NEWS</a>
<a href="#">PRODUCTS</a>
<a href="#">CONTACT</a>
</nav>
</body>
</html>

Думаю, в этом коде Вам все понятно. В теге «h2» мы помещаем заголовок, а в теге «nav» находятся четыре пункта нашей навигации.

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

2. Следующий этап – это создание файла таблицы стилей. Создайте файл таблицы стилей и дайте ей имя «style.css».

Сохраните этот файл в том же каталоге, что и основной html-файл. Если Вы захотите поместить его в отдельную папку, то не забудьте указать корректный путь при подключении в html-файле.

3. Теперь давайте зададим основные стили для нашей страницы. Мы зададим ширину и выравнивание для тега «body», стили для нашего заголовка и основные стили для навигации: тип шрифта, его размер, отступы, верхнюю и нижнюю рамку.

Также зададим и общие стили для кнопок нашей навигации: создадим нужные отступы, уберем подчеркивание и установим цвет текста.

На данном этапе вставьте вот такой код в Ваш css-файл:

body{width:1024px; margin:0 auto; text-align:center;}
h2{font-family:Verdana, Geneva, sans-serif; font-size:48px; 
color:#636; text-shadow:2px 2px 2px #666;}
nav{font-size:24px; padding:10px; font-family:Verdana, Geneva, sans-serif;
border-bottom:1px solid #ccc; border-top:1px solid #ccc;}
nav a{margin:0px 20px 0px 0px; text-decoration:none; color:#999; padding:10px;}

Если мы сейчас посмотрим нашу страницу в браузере, то увидим следующее.

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

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

Сделаем мы это при помощи следующего кода:

nav a:hover{color:#fff;}

Если сейчас наведем указатель мыши на любую из кнопок, то текст кнопки поменяется на белый, и она растворится на фоне. Но скоро у каждой кнопки будет свой цветной фон, так что это не страшно.

5. Теперь пришло время задать для каждой кнопки, на которую наведен курсор свой фоновый цвет. И здесь помимо псевдокласса «:hover», которым мы уже пользовались, мы также будем использовать псевдокласс «nth-child()».

Для того, чтобы дать понять псевдоклассу для какого из дочерних элементов мы будем прописывать стиль, мы должны задать определенное значение, которое будет расположено в скобках.

В нашем случае все будет очень просто. Нам только нужно будет передать номер стилизуемой кнопки.

Выглядеть это будет вот так:

nav a:hover:nth-child(1){background:#ffc60a;}
nav a:hover:nth-child(2){background:#d5b692;}
nav a:hover:nth-child(3){background:#394a97;}
nav a:hover:nth-child(4){background:#6f7072;}

Теперь каждая кнопка имеет свой фоновый цвет при наведении на нее указателя мыши.

Нам не пришлось загромождать наш html-файл различными классами, а результат мы получили именно тот, который был необходим.

Это лишь один из способов использования псевдокласса nth-child(). Один из самых простых способов. На самом же деле с его помощью можно придавать различные стили любому сочетанию чередующихся элементов. Можно, например, делать разный фоновый цвет для четных и нечетных строк таблицы при помощи лишь пары строк кода, а также еще много всего интересного. Но об этом в следующий уроках.

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

Если данный урок Вам понравился поделитесь им с друзьями при помощи кнопок социальных сетей ниже или оставьте свой комментарий.

Я на этом с Вами прощаюсь, успехов Вам и до новых встреч.

С Вами как всегда была Анна Котельникова.

До скорого.

Style: Button — Университет Хьюстона

ПОЧЕМУ Я МОГУ ЭТО ИСПОЛЬЗОВАТЬ?
Кнопка может представлять собой интуитивно понятную метафору тактильного устройства, которую пользователи сразу же идентифицируют как элемент действия. Используйте в онлайн-формах или для обозначения специальной загрузки или действия. Не злоупотребляйте! Беспорядок снижает воздействие. СМОТРИ ТАКЖЕ
Примечания по удалению стиля
См. Другие примеры всплывающих окон стиля

btn

и btn-primary и т. Д.

Эти стили предназначены для превращения связанного текста или соответствующих входных данных формы в виртуальные кнопки.

| Создание кнопок | Примеры | Сравнить с: Нет стиля, недостаточно стиля |

Создание кнопок

Стили кнопок следует применять к тегу HTML ссылки (т.е.

Также обратите внимание, что стиль ‘btn’ не должен стоять отдельно: его также необходимо комбинировать с одним или несколькими стилями кнопок-модификаторов, такими как ‘btn-primary’ или ‘btn-default’ (, которые также не должны применяться в одиночку — см. раздел «Сравнение», где приведены примеры недостаточно применяемых стилей ).

Для текста:

• Выделите диапазон текста , к которому будет применена ссылка.
• Используйте инструмент «Вставить / редактировать ссылку» , чтобы определить ссылку.
• Перед тем, как щелкнуть Ok , откройте всплывающее окно селектора CSS и выберите основной стиль кнопки «btn».
• Щелкните Ok , чтобы применить ссылку.
• Примечание: поскольку селектор CSS инструмента «Ссылка» немного сложен и может разрушить предыдущие назначения стилей, рекомендуется добавить любые дополнительные стили, необходимые после выхода из инструмента «Ссылка» — вернувшись к установленной ссылке, поместив курсор в связанный текст, а затем выберите другой стиль (-а) из всплывающего окна «Форматы: настраиваемые стили» .
• Активные, примененные стили будут отображаться во всплывающем списке с маркером рядом с ними.
• Стили также можно удалить:
  • поместите курсор внутри существующей ссылки;
  • откройте всплывающее окно «Форматы: пользовательские стили», а затем —

  .

  • щелкните стиль (ы) с уже показанным маркером, чтобы удалить этот стиль.
• Если вам удобно просматривать HTML, откройте этот редактор (Инструменты : исходный код ) и просмотрите назначения стилей для рассматриваемых ссылок.

ДА:

. . .

НОМЕР:

. . .

Для элементов формы:

Применение этих стилей для формирования тегов input потребует редактирования HTML (Инструменты : исходный код ). Стили btn, , btn-primary и т. Д. Должны применяться к соответствующим тегам ввода формы как часть атрибута класса ; е.г. как в двух тегах ввода, показанных ниже:

Другие примеры

Следующий связанный текст показывает

btn вместе с другими стилями изменения кнопок

Примечание: только для демонстрационных целей эти ссылки обычно являются простыми ссылками на одну и ту же страницу.

Использование btn, btn-primary:
кнопка: btn-primary

Использование btn, btn-primary, btn-sm:
кнопка: btn-primary, btn-sm

Использование btn, btn-primary, btn-xs:
кнопка: btn-primary, btn-xs

Использование btn, btn-default, btn-xs:
кнопка: btn-default, btn-xs

Использование btn, btn-primary, btn-lg:
кнопка: btn-primary, btn-lg

Обзор стилей кнопок, используемых в UH, см. На страницах Bootstrap
Web Marketing.
(кнопка выше использует: btn, btn-success)

Следующие входные данные типа «submit» формы шоу:

соответственно, с стиль не применяется ; только с btn ; и с применением как btn , так и btn-primary .

Сравнить с:

Это предложение в формате абзаца не имеет определенного стиля.

Это предложение в формате абзаца содержит следующее: связанный текст без примененного стиля.

Следующие слова и фразы имеют недостаточно примененные стили кнопок:

Используется только btn

Использование только ‘btn-default’

Используется только btn-primary

Вернуться к: Использование всплывающего окна «Стили» — пользовательский селектор CSS

Создание стилей для нескольких кнопок с помощью CSS — Data Shop Talk

Инструменты бизнес-аналитики

По

Джули Себби

–

08 мая, 2018

–

9

Комментарии

• Успешно ли вы реализовали CSS в проектах Spotfire, но считаете, что он должен быть более гибким?
• Хотите сделать больше с помощью CSS в Spotfire?
• Вам нужно несколько форматов кнопок и вы не знаете, как изменить CSS?

В недавнем посте я объяснил, как создать стиль кнопки с помощью CSS.Изучение этого кода изменило способ форматирования кнопок в Spotfire. Больше не нужно форматировать каждую кнопку. МАГИЯ !!! Не совсем, просто код, но мне все равно так казалось. Но что, если вы хотите создать более одного стиля кнопки ??? Что ж, технически существует несколько способов решить эту проблему. Я решил использовать селекторы классов. Если вы не знаете, что такое селекторы классов, посетите эту страницу W3Schools для получения информации. Прежде чем я объясню решение, вот небольшой обзор создания стилей кнопок.

Обзор

Как обсуждалось в сообщении, на которое я ссылался выше, вы можете создавать стили кнопок, используя CSS внутри тега стиля. Синтаксис «.sfc-action-button» ссылается на класс, связанный с элементом кнопки. Этот код отформатирует все кнопки на данной странице Spotfire. Вот пример.

Создание стилей для нескольких кнопок

Чтобы создать несколько стилей кнопок…

1. Поместите кнопки в контейнер определенного типа, например ,
   или

   , в зависимости от того, сколько места вы хотите занять.

2. Создайте класс для каждого формата. Это может быть что угодно. В примере, показанном ниже, я создал формат под названием «buttonS1» с другим цветом фона.
   • Примечание: Я также создал формат под названием «buttonS2», но удалил его из тега
     Кнопка успеха Кнопка ошибки Кнопка предупреждения Дополнительная кнопка