Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

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

Категория: Готовые 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.

  1. <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
  2. <p>Etiam porta sem malesuada magna mollis euismod.</p>
  3. <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
  4. <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
  5. <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>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Полное имя
[email protected]
  1. <address>
  2. <strong>Twitter, Inc.</strong><br>
  3. 795 Folsom Ave, Suite 600<br>
  4. San Francisco, CA 94107<br>
  5. <abbr title="Phone">P:</abbr> (123) 456-7890
  6. </address>
  7.  
  8. <address>
  9. <strong>Full Name</strong><br>
  10. <a href="mailto:#">[email protected]</a>
  11. </address>

Цитаты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. <blockquote>
  2. ...
  3. </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
  1. <ul>
  2. <li>...</li>
  3. </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
  1. <ol>
  2. <li>...</li>
  3. </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
  1. <ul>
  2. <li>...</li>
  3. </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.
  1. <dl>
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </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.
  1. <dl>
  2. <dt>...</dt>
  3. <dd>...</dd>
  4. </dl>

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

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

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

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

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

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

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

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

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

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

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

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table>
  2. </table>

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

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

.table-striped

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

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table>
  2. </table>

.table-bordered

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

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
Mark Otto @TwBootstrap
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table>
  2. </table>

.table-hover

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

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table>
  2. </table>

.table-condensed

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

# Имя Фамилия Имя пользователя
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
  1. <table>
  2. </table>

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

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

Класс Описание
.success Указывает на успешно выполненное действие.
.error Указывает на опасное или негативное действие..
.warning Указывает на предупреждение, на которое следует обратить внимание.
.info Используется как альтернатива стилям по умолчанию.
# Продукт Платеж Статус
1 TB — Ежемесячно 01/04/2012 Подтвержден
2 TB — Ежемесячно 02/04/2012 Отклонен
3 TB — Ежемесячно 03/04/2012 Задержка
4 TB — Ежемесячно 04/04/2012 Позвонить для подтверждения
  1. ...
  2. <tr>
  3. <td>1</td>
  4. <td>TB - Monthly</td>
  5. <td>01/04/2012</td>
  6. <td>Approved</td>
  7. </tr>
  8. ...

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

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

Тег Описание
<table> Вставляет элемент для отображения данных в табличной форме.
<thead> Элемент контейнера предназначен для хранения одной или нескольких строк таблицы. (<tr>) Озаглавливает колонки таблицы.
<tbody> Элемент контейнера для создания строк в теле таблицы (<tr>)
<tr> Элемент контейнера для настройки ячеек таблицы. (<td> or <th>) Создает отдельную строку.
<td> Ячейка таблицы по умолчанию
<th> Специальная ячейка для названий столбцов таблицы (или строк — зависит от расположения).
Следует использовать с кодом <thead>
<caption> Краткое описание в таблице, которое очень удобно для мобильных устройств.
  1. <table>
  2. <caption>...</caption>
  3. <thead>
  4. <tr>
  5. <th>...</th>
  6. <th>...</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>...</td>
  12. <td>...</td>
  13. </tr>
  14. </tbody>
  15. </table>

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

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

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

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

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

Форма поиска

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

  1. <form>
  2. <input type="text">
  3. <button type="submit">Search</button>
  4. </form>

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

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

  1. <form>
  2. <input type="text" placeholder="Email">
  3. <input type="password" placeholder="Password">
  4. <label>
  5. <input type="checkbox"> Запомнить
  6. </label>
  7. <button type="submit">Отправить</button>
  8. </form>

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

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

  • Добавьте .form-horizontal в форму
  • Добавьте текст и элементы управления внутрь .control-group
  • Добавьте .control-label в текст
  • Добавьте любой подходящий элемент управления .controls для точной настройки
  1. <form>
  2. <div>
  3. <label for="inputEmail">Email</label>
  4. <div>
  5. <input type="text" placeholder="Email">
  6. </div>
  7. </div>
  8. <div>
  9. <label for="inputPassword">Password</label>
  10. <div>
  11. <input type="password" placeholder="Password">
  12. </div>
  13. </div>
  14. <div>
  15. <div>
  16. <label>
  17. <input type="checkbox"> Remember me
  18. </label>
  19. <button type="submit">Sign in</button>
  20. </div>
  21. </div>
  22. </form>

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

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

Поле ввода

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

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

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

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

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

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

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

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

По умолчанию (вертикально)
  1. <label>
  2. <input type="checkbox" value="">
  3. А вот вам опция номер один - очень крутая штука.
  4. </label>
  5.  
  6. <label>
  7. <input type="radio" name="optionsRadios" value="option1" checked>
  8. А вот вам опция номер один - очень крутая штука.
  9. </label>
  10. <label>
  11. <input type="radio" name="optionsRadios" value="option2">
  12. Опция два - это нечто другое. Выбрав ее, отменяете первую.
  13. </label>
Флажки в одной строке

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

  1. <label>
  2. <input type="checkbox" value="option1"> 1
  3. </label>
  4. <label>
  5. <input type="checkbox" value="option2"> 2
  6. </label>
  7. <label>
  8. <input type="checkbox" value="option3"> 3
  9. </label>

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

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

  1. <select>
  2. <option>1</option>
  3. <option>2</option>
  4. <option>3</option>
  5. <option>4</option>
  6. <option>5</option>
  7. </select>
  8.  
  9. <select multiple="multiple">
  10. <option>1</option>
  11. <option>2</option>
  12. <option>3</option>
  13. <option>4</option>
  14. <option>5</option>
  15. </select>

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

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

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

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

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

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

  1. <div>
  2. <span>@</span><input size="16" type="text" placeholder="Username">
  3. </div>
  4. <div>
  5. <input size="16" type="text"><span>.00</span>
  6. </div>
Комбинирование

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

  1. <div>
  2. <span>$</span><input size="16" type="text"><span>.00</span>
  3. </div>
Кнопки вместо текста

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

  1. <div>
  2. <input size="16" type="text"><button type="button">Go!</button>
  3. </div>
  4.  
  5. <div>
  6. <input size="16" type="text"><button type="button">Search</button><button type="button">Options</button>
  7. </div>
Форма поиска
  1. <form>
  2. <div>
  3. <input type="text">
  4. <button type="submit">Search</button>
  5. </div>
  6. <div>
  7. <button type="submit">Search</button>
  8. <input type="text">
  9. </div>
  10. </form>

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

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

Взаимосвязанные размеры
  1. <input type="text" placeholder=".input-mini">
  2. <input type="text" placeholder=".input-small">
  3. <input type="text" placeholder=".input-medium">
  4. <input type="text" placeholder=".input-large">
  5. <input type="text" placeholder=".input-xlarge">
  6. <input type="text" placeholder=".input-xxlarge">

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

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

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

  1. <input type="text" placeholder=".span1">
  2. <input type="text" placeholder=".span2">
  3. <input type="text" placeholder=".span3">
  4. <select>
  5. ...
  6. </select>
  7. <select>
  8. ...
  9. </select>
  10. <select>
  11. ...
  12. </select>

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

  1. <div>
  2. <input type="text" placeholder=".span5">
  3. </div>
  4. <div>
  5. <input type="text" placeholder=".span4">
  6. <input type="text" placeholder=".span1">
  7. </div>
  8. ...

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

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

  1. <span>Some value here</span>

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

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

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

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

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

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

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

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

Фокус ввода

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

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

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

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

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

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

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

  1. <div>
  2. <label for="inputWarning">Предупреждение</label>
  3. <div>
  4. <input type="text">
  5. <span>Что-то идет не так</span>
  6. </div>
  7. </div>
  8. <div>
  9. <label for="inputError">Ошибка</label>
  10. <div>
  11. <input type="text">
  12. <span>Пожалуйста, исправьте ошибку</span>
  13. </div>
  14. </div>
  15. <div>
  16. <label for="inputSuccess">Выполнено успешно</label>
  17. <div>
  18. <input type="text">
  19. <span>Урааа!</span>
  20. </div>
  21. </div>

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

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

Кнопка class=»» Описание
Default btn Стандартная серая кнопка с градиентом
Главная кнопка btn btn-primary Обеспечивает дополнительную визуальную ширину и указывает на первичное действие в наборе кнопок
Информация btn btn-info Используется как альтернатива стилям по умолчанию
Успешное действие btn btn-success Указывает на успешное или положительное действие
Предупреждение btn btn-warning Указывает на то, что действие должно совершаться с предусмотрительностью
Опасность btn btn-danger Указывает на опасное или потенциально негативное действие
Инверсия btn btn-inverse Чередующиеся темно-серые кнопки, не связанные с определенным действием
Ссылка btn btn-link Отмена выделения кнопки. Кнопка получает вид ссылки, сохраняя при этом свои функции
Кросс-браузерная совместимость

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

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

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

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

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

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

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

  1. <p>
  2. <button type="button">Большая кнопка</button>
  3. <button type="button">Большая кнопка</button>
  4. </p>
  5. <p>
  6. <button type="button">Кнопка по умолчанию</button>
  7. <button type="button">Кнопка по умолчанию</button>
  8. </p>
  9. <p>
  10. <button type="button">Маленькая кнопка</button>
  11. <button type="button">Маленькая кнопка</button>
  12. </p>
  13. <p>
  14. <button type="button">Мини-кнопка</button>
  15. <button type="button">Мини-кнопка</button>
  16. </p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. <img src="...">
  2. <img src="...">
  3. <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-. Для использования поместите код с примера ниже в нужное место:

  1. <i></i>

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

  1. <i></i>

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


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

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

Кнопки
Группа кнопок в меню
  1. <div>
  2. <div>
  3.  
  4. <a href="#"><i></i></a>
  5. <a href="#"><i></i></a>
  6. <a href="#"><i></i></a>
  7. <a href="#"><i></i></a>
  8. </div>
  9. </div>
Кнопки с выпадающим списком
  1. <div>
  2. <a href="#"><i></i> Пользователь</a>
  3. <a data-toggle="dropdown" href="#"><span></span></a>
  4. <ul>
  5. <li><a href="#"><i></i> Редактировать</a></li>
  6. <li><a href="#"><i></i> Удалить</a></li>
  7. <li><a href="#"><i></i> Запретить</a></li>
  8. <li></li>
  9. <li><a href="#"><i></i> Назначить администратором</a></li>
  10. </ul>
  11. </div>
Маленькая кнопка
  1. <a href="#"><i></i></a>
Навигация
  1. <ul>
  2. <li><a href="#"><i></i> Домой</a></li>
  3. <li><a href="#"><i></i> Библиотека</a></li>
  4. <li><a href="#"><i></i> Приложения</a></li>
  5. <li><a href="#"><i></i> Дополнительно</a></li>
  6. </ul>
Поля формы
  1. <div>
  2. <label for="inputIcon">Адрес электронной почты</label>
  3. <div>
  4. <div>
  5. <span><i></i></span>
  6. <input type="text">
  7. </div>
  8. </div>
  9. </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», но удалил его из тега

Пример 3: стили кнопок css

 .кнопка {
    размер шрифта: 16 пикселей;
    межбуквенный интервал: 2 пикселя;
    font-weight: 400! важно;
    цвет фона: # e63946ff;
    цвет: #fff;
    отступ: 23px 50px;
    маржа: авто;
    выравнивание текста: центр;
    дисплей: встроенный блок! важно;
    текстовое оформление: нет;
    граница: 0px;
    ширина: макс-контент;
    курсор: указатель;
    переход: все 0,3 с 0 с выходом;
}

.button: hover {
    преобразовать: масштаб (1.04, 1);
    цвет фона: rgb (216, 10, 27);
    текстовое оформление: нет;
}





.btn_sm {
    отступ: 17px 40px! important;
}

.btn_md {
    отступ: 20px 50px! important;
}

.btn_lg {
    отступ: 23px 60px! important;
}



.btn_block {
    ширина: 100%! важно;
    отступ: 22px 30px! important;
}  

Пример 4: стиль кнопки css

   Чистая кнопка 
  

Пример 5: стиль кнопки css

  

Пример 6: прямоугольник в стиле кнопки CSS

  

Nunc condimentum mauris elit

  • Duis quis eros felis
  • Nulla facilisi

Стилизация кнопок в виде ссылок

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

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

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

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

Во-первых, разметка: хотя вы можете использовать input type = "submit" в качестве элемента submit, и этот пример будет работать таким же образом, элемент кнопки, на мой взгляд, намного лучший вариант.Он действительно гибкий и может иметь множество различных элементов, вложенных внутри, если вы того пожелаете, от простого текста с изображением до заголовков и абзацев. Эта статья о кнопках, написанная Аароном Густафсоном еще в 2006 году, по-прежнему актуальна и сегодня и объясняет, как можно использовать элемент скромной кнопки.

Еще одна полезная статья, также недавно вышедшая, объясняет методы, которые Wufoo использует для стилизации ссылок, чтобы они выглядели как кнопки. Действительно важно вынести из этой статьи то, что установка overflow: visible на кнопку решает проблему безумной ширины, с которой IE любит сталкиваться.

Я опубликовал простую демонстрацию, которую вы можете просмотреть в своем браузере. В этом примере разметка будет следующей:

  

На базовой странице в этой демонстрации к ссылкам и тексту применены следующие стили:

  body {
семейство шрифтов: "Verdana" без засечек;
}
ссылка,
а: посетил {
цвет синий;
}
а: парение,
фокус,
a: active {
черный цвет;
}  

Затем я добавляю магическое заклинание, чтобы увеличить ширину в IE для всех кнопок:

  button {
перелив: видимый;
ширина: авто;
}  

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

Курсором по умолчанию для элементов кнопки является обычная стрелка. Обычно я устанавливаю курсор : указатель для всех элементов кнопки, чтобы пользователь знал, что они доступны для нажатия. Это имеет еще больше смысла для кнопок, которые притворяются ссылками.

  button.link {
семейство шрифтов: "Verdana" без засечек;
размер шрифта: 1em;
выравнивание текста: слева;
цвет синий;
фон: нет;
маржа: 0;
отступ: 0;
граница: нет;
курсор: указатель;
}  

Интересно, что Mozilla не позволит вам выбрать текст элемента кнопки, как это делают другие браузеры, поэтому, чтобы переопределить это и обеспечить, чтобы пользователь мог выбирать текст нашей псевдо-ссылки, вы также можете применить следующее :

 
-moz-user-select: текст;
  

Вы также можете переопределить все остальные стили кнопок, если они есть.

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

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

 
button.link span {
текст-оформление: подчеркивание;
}
button.link:hover span,
button.link:focus span {
черный цвет;
}
  

Естественно, что у всех " любимый браузер " Internet Explorer 6 не будет отображать эффект наведения курсора на вашу ссылку, потому что он не "делает" наведение курсора на произвольные элементы, а только на фактические ссылки. Вы можете подделать этот эффект с помощью Javascript, если хотите, добавив класс при наведении и удалив его при выводе. Другие ограничения этого метода заключаются в том, что выделение текста во всех версиях IE выглядит немного странно.

Мой пример выше очень прост. Если вы используете кнопку, которая отображается в потоке с текстом в качестве ссылки, например, ссылку удаления на элементе корзины покупок в этом примере, вам также необходимо применить ' display: inline ' как к форме, так и к любому уровню блока. элементы внутри.

Итак, вот и все, никаких оправданий - идите вперед и используйте правильный метод HTTP!

Шпаргалка по UI: кнопки. Мой любимый элемент дизайна - это… | by Tess Gadd

В этом разделе мы рассмотрим общие стили кнопок.Стиль - это просто эстетика кнопки, а не то, как ее следует использовать.

Сплошные кнопки

Сплошные кнопки - это именно то, на что они похожи - это кнопки со сплошной заливкой. Готово.

Сплошная кнопка.

Кнопки с линиями и призраками

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

Кнопка линии (слева) и кнопка-призрак (справа).

Кнопки с закругленными краями

Кнопки с закругленными краями - это кнопки, края которых имеют максимальный радиус закругленной границы.

Круглая пуговица.

Боковое примечание: Скругленные кнопки выглядят ужасно сложенными. Каждый раз, когда вы складываете закругленные кнопки, UI-дизайнер плачет.

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

FAB (Плавающая кнопка действия)

Плавающие кнопки действия - это продуманный шаблон дизайна, популярный благодаря Material Design от Google.Хотя они могут выглядеть как кнопка со значком, на самом деле они используются для основного действия на экране.

Кнопка FAB.

Если вы хотите узнать больше о FAB, я рекомендую проверить «Кнопки: плавающая кнопка действия» на сайте Material Design.

Текстовая ссылка

Текстовая ссылка - это очень простой тип кнопки. Есть несколько способов показать, что что-то является ссылкой. Это может быть цвет, или подчеркивание, или позиция ссылки, или даже сам текст (например.г. "Прочитайте больше").

Текстовые ссылки имеют другой стиль.

Когда дело доходит до цвета, на большинстве сайтов используется синий цвет, так как он лучше всего идентифицируется как ссылка. Вы спросите, почему классические текстовые ссылки «синие»? Это восходит к сэру Тиму Бернерсу-Ли, который, как правило, считается изобретателем Всемирной паутины (примечание: представьте, что в вашем резюме есть «Изобретатель Всемирной паутины»). Хотя кажется, что, когда он выбирал цвет, он не думал о доступности, но самое крутое в синем - это то, что даже люди с дальтонизмом обычно все еще видят его.

Сообщение опубликовано исправление: В первой публикации было написано, что сэр Тим Бернерс-Ли был «изобретателем Интернета», тогда как на самом деле он был изобретателем Всемирной паутины. Приношу свои извинения за пропущенную информацию. Спасибо Дэвид Макдональд за указание 🙂

Значок с кнопкой-ярлыком

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

Кнопка со значком и меткой.

Самая сложная вещь при работе со значками и надписями - это выяснить, насколько большим сделать значок по отношению к шрифту. Вариант 1: вы делаете размер значка похожим на высоту шапки шрифта. Вариант 2. Размер значка должен быть намного больше, чем высота строки. Предупреждение: если значок лишь немного больше высоты шапки, он будет выглядеть несбалансированным или похожим на ошибку. Он должен быть примерно такой же высоты колпачка или намного больше - избегайте промежуточных промежутков.

Кнопка со значком

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

Иконки кнопок с разными стилями.

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

Значок с текстовой ссылкой

На некоторых текстовых ссылках может быть значок.Обычно они не помещаются в основной текст.

Различные значки с кнопками ссылок.

Полное руководство по стилизации кнопок с помощью CSS (часть 1)

Кнопки

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

Если вы новичок в CSS, то кнопки - отличный способ поэкспериментировать с CSS!

Чтобы по-настоящему получить максимум от новичка, сделайте это на настольном компьютере или ноутбуке (если вы пытаетесь кодировать на телефоне - вы чокнутый, и удачи!) .И откройте редактор Dubsado на весь экран.

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

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

В этом руководстве мы узнаем, как добавить кнопки в ваше предложение Dubsado и как выполнить базовую настройку с помощью CSS.

Мы рассмотрим цвета, границы, цвета фона, эффекты наведения, тени блоков, переходы и многое другое.

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

Но сначала давайте изучим основы.

Если вы не беспокоитесь об изучении CSS и хотите несколько красивых кнопок, например, за секунды - Я также написал несколько примеров plug-and-play, которые вы можете скопировать и вставить прямо в вашу форму Dubsado - не касаясь строка кода.

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

Как добавить кнопки в Dubsado

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

  1. Откройте форму Dubsado
  2. Перетащите текстовый блок , куда бы вы ни хотели, чтобы отображалась ваша кнопка ( или используйте существующий текстовый блок )
  3. Введите текст для вашей кнопки (т.е.е. Подробнее)
  4. Выделите текст
  5. Щелкните Параметры форматирования ()
  6. Щелкните Очистить все форматирование ()
  7. На той же панели инструментов щелкните Вставить ссылку () → Кнопка
  8. Введите URL
  9. Отметьте « Открыть в новой вкладке » (вы должны всегда делать это для ссылки на внешние страницы)

Теперь вы можете оставить это так, но если вы хотите сделать его фирменным, читайте дальше для некоторой магии CSS!

Добавить кнопки с HTML-кодом

Если вы предпочитаете включать кнопки с кодом, перетащите блок кода и замените образец кода на:

  текстовая кнопка 
 

Затем измените URL-адрес ссылки и текст кнопки.Например:

посетить сайт

Как использовать CSS для стилизации кнопок Dubsado

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

Для начала:

  1. Перетащите блок кода (он может идти куда угодно).
  2. Удалить весь образец кода
  3. Заменить кодом ниже
  

Теперь наш блок кода подготовлен для наших настроек!

Разрыв в выделенной строке? Вот где пойдут наши настройки. Мы сложим их друг на друга так:

 <стиль>
a.dubsButton {
цвет: #ffffff;
цвет фона: # 000000;
тень коробки: нет;
отступ: 10px 22px 10px 22px;
}
 

Если вы добавили кнопку вручную с помощью приведенного выше кода HTML, вам необходимо изменить имя селектора, заменив a.dubsButton для a.primaryButton , вот так:

 <стиль>
a.primaryButton {
цвет: #ffffff;
цвет фона: # 000000;
тень коробки: нет;
отступ: 10px 22px 10px 22px;
}
 

Настройки CSS

Чтобы лучше проиллюстрировать, что делает каждое свойство, мы настроим кнопку ниже:

выучить больше

Прежде чем мы начнем настраивать наши кнопки, вам понадобится шестнадцатеричный код цвета марки (символ #, за которым следуют 6 цифр e.г. # 000000).

Если у вас нет фирменных цветов или вы просто хотите поиграть со случайной палитрой, взгляните на некоторые из доступных здесь цветовых палитр: «Цвета и шрифты» и «Цветовые коды HTML».

Цвет фона

выучить больше

По умолчанию цвет фона вашей кнопки (в Dubsdao) будет таким же, как цвет бренда, который вы ввели в настройках бренда:

Если вы хотите изменить это, используйте следующий код (вы должны оставить бит ! Important в конце).

 a.dubsButton {
 цвет фона: # a06c50! important;
 } 

Добавить обивку

Вы можете установить одинаковые отступы для всех 4 сторон кнопки:

выучить больше

 a.dubsButton {
 отступ: 20 пикселей;
 } 

Или используйте разные размеры отступов для каждой стороны (сверху, справа, снизу, слева):

выучить больше

 a.dubsButton {
 отступ: 20 пикселей 60 пикселей 20 пикселей 60 пикселей;
 } 

Цвет текста

выучить больше

 а.dubsButton {
 цвет: # a06c50! important;
 } 

Тень

выучить больше

 a.dubsButton {
тень коробки: 4px 4px # dddad4;
 } 

Границы

выучить больше

 a.dubsButton {
 граница: 1px solid # 1f1f1f! important;
 } 

Острые углы

выучить больше

Хотите контролировать, насколько скруглены углы? Это для острых углов:

 a.dubsButton {
 радиус границы: 0 пикселей;
 } 

Закругленные углы

выучить больше

И увеличьте число для более закругленных углов:

 а.dubsButton {
 радиус границы: 25 пикселей;
 } 

Обновить шрифты

Что касается шрифтов, вы можете обновить их прямо в редакторе Dubsado!


Коды Plug and Play

Зайдите в раздел "Моя халява", чтобы получить бесплатные фрагменты кода plug-and-play для ваших кнопок!

.

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

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