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

:active — CSS | MDN

Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью — это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.

Также псевдокласс :active срабатывает при использовании клавиши TAB на клавиатуре. Обычно это используется для HTML-элементов <a> и <button>, но может применяться и к другим элементам.

Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link, :hover и :visited, описанными в последующих правилах. Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link — :visited — :hover — :active.

Примечание: В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс :active должен применяться только к первой кнопке; для праворуких мышей — это обычно самая левая кнопка.

Активные ссылки

HTML

<p>Этот абзац содержит ссылку:
<a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.</a>
У абзаца фон станет серым при нажатии на него или на ссылку. </p>

CSS

a:link { color: blue; }          
a:visited { color: purple; }     
a:hover { background: yellow; }  
a:active { color: red; }         

p:active { background: #eee; }   

Результат

Активные элементы формы

HTML

<form>
  <label for="my-button">Моя кнопка: </label>
  <button type="button">Попробуй Нажать Меня или Мою подсказку!</button>
</form>

CSS

form :active {
  color: red;
}

form button {
  background: white;
}

Result

BCD tables only load in the browser

CSS: как сделать так, чтобы кнопка всегда была слева от другой кнопки, которая находится в углу?

---------------------------------------------
|   text                                    |
|   text                                    |
|   text                                    |
|   text                                    |
|   text                                    |
|   text                   -------  ------- |
|   textttttttttttttt     |Button1||Button2||
|                          -------  ------- |
---------------------------------------------

Поэтому я хочу, чтобы Button1 всегда был слева от Button2, а Button2 всегда находился в правом нижнем углу div. Как я могу это сделать? Кстати, в настоящее время в моем коде есть две кнопки, входящие в строку «texttttttttttttt». Я не делал отдельных div/spans для текста и кнопок.

html

css

Поделиться

Источник

dtgee    

03 сентября 2013 в 23:25

3 ответа

• Как сделать так, чтобы <div> всегда находился в правом верхнем углу окна браузера независимо от размера браузера?

  Я хочу, чтобы следующий код всегда находился в правом верхнем углу, независимо от размера (т. е. когда пользователь изменяет размер окна браузера, оно все еще находится в том же положении): <div id=navbar><a href=#>Our Blog</a></div> CSS, который сопровождает это следующим…

• CSS/jQuery-отзывчивый дизайн, чтобы кнопка закрытия оставалась в правом углу

  Я пытаюсь создать всплывающее окно, которое остается фиксированным в середине экрана независимо от того, как пользователь изменяет размер своего окна вот js, который я использую для этого $(window).resize(function() { return $(.wrapper).css({ position: fixed, left: ($(window).width() -…

1

Ты хочешь что-то вроде этого?..

jsFiddle здесь .

Я просто сделал очевидное и пустил в ход элементы.

.paragraph {
    float:left;
}
.buttons {
    float:right;
}

Поделиться

Josh Crozier    

04 сентября 2013 в 00:25

1

Если вы хотите, чтобы контейнер располагался относительно, то при необходимости вы можете расположить дочерние элементы абсолютно. Это дает вам больше контроля над их расположением относительно контейнера. Это часто используется для создания div, который расширяется в соответствии с высотой контейнера, в котором он находится; например, .right-column-full { position:absolute; top:10px; bottom:10px; right:5px; }

Главная ловушка в решении Josh C заключается в том, что если вы добавите дополнительный текст или измените высоту div контейнера (среди других изменений), ваши кнопки останутся там, где они есть, если вы также не измените их свойства верхнего поля.

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

HTML

<div>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>texttttttttttttttttttttttttttttttt</p>
    <input type="button" value="Button-One">
    <input type="button" value="Button-Two">
</div>

CSS

.infoblock-container {position:relative;}
.button-one {position:absolute; right:5px; bottom:5px; width:80px; margin-right:84px;}
.button-two {position:absolute; right:5px; bottom:5px; width:80px;}

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

В отличие от решения Josh C, это всегда будет держать кнопки в правом нижнем углу и всегда будет иметь расстояние 5 пикселей (или что бы вы ни указали) от края. Указав ширину и поле, мы легко дадим самой правой кнопке достаточно места плюс 4 пикселя.

Поделиться

Lopsided    

04 сентября 2013 в 01:02

1

Я думаю, что здесь необходимо немного использовать оба подхода.

Во-первых, для того, чтобы кнопки располагались в углу с переносом текста, вам придется обернуть их в div

<div>
    <button>Text</button>
    <button>Text</button>
</div>

и ваш css

.buttons {
    position:absolute; 
    right:5px; 
    bottom:5px;
    width: 100px;
}

.button-left {
    float:left;
    width:45px;
    margin: 0 2px
}

.button-right {
    float:right;
    width:45px;
    margin:0 2px;
}

`

Поделиться

Robert    

04 сентября 2013 в 01:20

Похожие вопросы:

Выровняйте текст слева от кнопки, которая находится в правой части страницы

Как выровнять текст только слева от кнопки, которая находится в правой части страницы, независимо от размера текста? Я использую абсолютную позицию прямо сейчас, но это, вероятно, не очень хорошее…

Добавление HTML слева от существующего содержимого DIV

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

Как сделать так, чтобы эта кнопка jQueryUI была того же размера, что и кнопка, созданная с помощью пользовательского стиля CSS?

Здесь есть две кнопки: http://jsfiddle.net/fintiblick/g48EL/3 / Первый myStyle использует два пользовательских стиля CSS: mybutton и mywidth . Вторая кнопка jqueryui имеет стили, определенные…

Как сделать так, чтобы <div> всегда находился в правом верхнем углу окна браузера независимо от размера браузера?

Я хочу, чтобы следующий код всегда находился в правом верхнем углу, независимо от размера (т. е. когда пользователь изменяет размер окна браузера, оно все еще находится в том же положении): <div…

CSS/jQuery-отзывчивый дизайн, чтобы кнопка закрытия оставалась в правом углу

Я пытаюсь создать всплывающее окно, которое остается фиксированным в середине экрана независимо от того, как пользователь изменяет размер своего окна вот js, который я использую для этого…

Как сделать так, чтобы кнопка оставалась на главном экране в углу?

Мне нужно сделать приложение, которое будет состоять из кнопки. Эта кнопка будет добавлена в углу дисплея телефона и никогда не исчезнет.(Если я открываю определенное приложение, кнопка должна быть…

Как сделать так, чтобы кнопка «больше» всегда переходила в режим «больше просмотра»?

Я разрабатываю приложение для ios с панелью вкладок. У меня есть более 5 кнопок на панели, так что на iphone у меня есть кнопка больше. Теперь предположим, что у меня есть такие кнопки: Button1…

Как сделать так, чтобы кнопка появилась в правой верхней части холста

Я использую C# с XAML . Я хочу, чтобы моя кнопка всегда была в правом верхнем углу , независимо от размера экрана. Я пытался сделать это так: <Button x:Name=SubmitExperimentBtn Content=Submit…

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

Я использую LeafletJS, но не могу понять, как изменить положение происхождения маркеров. В настоящее время начало координат маркеров (воображаемая точка, где они находятся glued на карте) находится…

Как сделать так, чтобы кнопка разделения отображала контекстное меню только при нажатии на разделенную деталь?

Я нашел много вопросов, касающихся разделенных кнопок, но мне нужно разъяснение. Я использую кнопку разделения Wisej. Следующий код покажет контекстное меню в левом нижнем углу части кнопки (слева…

Кнопки закрытия на CSS

.cl-btn-1 {

    margin: 20px;

    position: relative;

    display: flex;

    justify-content: center;

    height: 112px;

}    

.cl-btn-1 div {

    width: 100px;

    height: 100px;

    position: absolute;

    background-image: radial-gradient(#FFF, #BFE2FF);

    border-radius: 50%;

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    border: 6px solid #337AB7;

    cursor: pointer;

}

.cl-btn-1 div > span {

    background-color: #337AB7;

    display: block;

    height: 12px;

    border-radius: 6px;

    position: relative;

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    position: absolute;

    top: 50%;

    margin-top: -6px;

    left: 18px;

    width: 64px;

}

.cl-btn-1 div > span span {

    display: block;

    background-color: #215b8c;

    width: 12px;

    height: 12px;

    border-radius: 6px;

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    position: absolute;

    left: 0;

    top: 0;

}

.cl-btn-1 div > span.left {

    transform: rotate(45deg);

    transform-origin: center;

}

.cl-btn-1 div > span.left .circle-left {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 0;

}

.cl-btn-1 div > span.left .circle-right {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 52px;

}

.cl-btn-1 div > span.right {

    transform: rotate(-45deg);

    transform-origin: center;

}

.cl-btn-1 div > span.right .circle-left {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 0;

}

.cl-btn-1 div > span.right .circle-right {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 52px;

}

.cl-btn-1 div:hover > span {

    background-color: #215b8c;

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

}

.cl-btn-1 div:hover > span span {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    background-color: #337AB7;

}

.cl-btn-1 div:hover > span.left .circle-left {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 52px;

}

.cl-btn-1 div:hover > span.left .circle-right {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 0;

}

.cl-btn-1 div:hover > span.right .circle-left {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 52px;

}

.cl-btn-1 div:hover > span.right .circle-right {

    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);

    margin-left: 0;

}

Кнопки CSS эффекты при наведении и нажатии

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

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

Кое-что про дизайн в статье Блок с закруглёнными углами и тенью. Эллипс

Нужно просто поиграть с цифрами в свойствах border-radius и box-shadow, поэкспериментировать со свойствами gradient и background

Все кнопки, показанные ниже, действующие. Выбирайте вариант, который вам понравится.

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

Чтоб быстро увидеть код, понравившейся кнопки, щёлкните по ссылке «Код», рядом с кнопкой.

При наведении:

Кнопка Градиент Код

Кнопка Наплывание Код

Кнопка Обесцвечивание Код

Кнопка Всплывание Код

Кнопка Искажение Код

Кнопка Многоцветная рамка Код

Кнопка 3D кнопка Код

Появление текста вращением Код

Появление текста из глубины Код

Кнопка Появление картинки Код

При нажатии:

Красная кнопка Код

Кнопка с индикатором Код

Клавиша Код

Наведение и нажатие.

Кнопка

Выпуклая кнопка Код

Градиент


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
.one { /* Внешний вид кнопки */
color: #524E49; /* Цвет текста */
background: #fdeaa8 ; /* Фоновый цвет */
padding: 10px; /* Минимальный отступ текста от границ кнопки. Определяет размер кнопки */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Радиус закругления уголков */
box-shadow: 0px 1px 3px; /* Тень */
}
.one:hover { /* Преображение при наведении */
background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#777); /* Радиальный градиент, переход цвета от центра к краям */
}
</style>
</head>
<body>

<button>Кнопка</button>
</body>
</html>


Наплывание


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
.two { /* Внешний вид кнопки */
color: #524E49; /* Цвет текста */
background: #fdeaa8 ; /* Фоновый цвет */
padding: 10px; /* Внутренний отступ текста от границ блока. Определяет размер кнопки */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Радиус закругления уголков */
box-shadow: 0px 1px 3px; /* Тень */
position: relative; /* Относительное позиционирование, для установки абсолютного позиционирования для наплывания */
}
.two:before { /* Псевдо элемент для создания наплывания */
content:''; /* Обязательное свойство псевдоэлемента :before */
position: absolute; /* Позиционируем абсолютно */
top: 0px; /* Позиция по границам блока */
left: 0px;
width: 100%; /* Ширина по границам кнопки */
height: 0px; /* Высота 0, поэтому невиден */
background: rgba(148,144,143,0.4); /* Фоновый цвет наплывания */
border-radius: 5px; /* Радиус уголков */
transition: all 0.5s ease-out; /* Анимация. Движение. Трансформируются все свойства (all) в течении 0.5 секунды, быстро начинается и к концу замедляется (ease-out) */
}
.two:hover:before { /* При наведении */
height: 42px; /* Высота наплывания становится равной высоте кнопки */
}
</style>
</head>
<body>

<button>Кнопка</button>
</body>
</html>


Обесцвечивание


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
.three { /* Внешний вид кнопки */
color: #524E49; /* Цвет текста в кнопке */
background: #fdeaa8; /* Фоновый цвет */
padding: 10px; /* Отступ текста от границ - определяет размер кнопки */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
}
/* Меняем внешний вид при наведении */
.three:hover { /* Добавляем псевдокласс :hover */
background: rgba(0,0,0,0);/* Меняем фоновый цвет */
color: #3a7999; /* Меняем цвет текста */
box-shadow: inset 0 0 0 3px #3a7999; /* Меняем тень */
}
</style>
</head>
<body>
<button>Кнопка</button>
</body>
</html>


Всплывание


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид кнопки */
.elementy {
color: #524E49; /* Цвет текста */
background: #fdeaa8; /* Фоновый цвет */
padding: 10px; /* Внутренний отступ текста от границ */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
/* Задаём анимацию (перемещение). Для всех действий (all) Время перемещения (0.8 сек.) Направление перемещения (cubic-bezier(0.165, 0.84, 0.44, 1)) */
-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* Эффект при наведении */
.elementy:hover { /* Добавляем псевдокласс :hover */
/* Задаём расстояние, на которое сместится кнопка */
-webkit-transform: translate(10px);
transform: translate(10px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) /* Изменяем тень */
}
</style>
</head>
<body>
<button>Кнопка</button>
</body>
</html>


Искажение


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид кнопки */
.five {
color: #524E49; /* Цвет текста */
background: #fdeaa8; /* Фоновый цвет */
padding: 10px; /* Внутренний отступ */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
/* Задаём анимацию. Для всех элементов (all), время анимации (500ms) */
transition: all 500ms ease-out;
}
/* Эффект при наведении */
.five:hover { /* Добавляем псевдокласс :hover */
transform: skew(10deg);/* Задаём действие анимации - отклонение на 10 градусов */
}
</style>
</head>
<body>
<button>Кнопка</button>
</body>
</html>


Разноцветная рамка


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид кнопки */
.six {
color: #524E49; /* Цвет текста */
background: #fdeaa8; /* Фоновый цвет */
padding: 10px; /* Отступ текста от границ. Определяет размер кнопки */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
/* Задаём анимацию. Для всех элементов (all), время появления рамки (500ms), быстро начинается потом замедляется (ease-out) */
transition: all 500ms ease-out;
}
/* Эффект при наведении */
.six:hover { /* Добавляем псевдокласс :hover */
/* Используем несколько теней разного цвета и размера */
box-shadow: 0px 0px 0px 2px #f90914,
0px 0px 0px 7px #a7f9c9,
0px 0px 0px 9px #f90914,
0px 0px 5px 10px #ff4d00;
}
</style>
</head>
<body>
<button>Кнопка</button>
</body>
</html>


3D кнопка


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид кнопки */
.seven {
color: #524E49; /* Цвет текста */
background: #fdeaa8; /* Фоновый цвет */
padding: 10px; /* Отступ текста от границ */
font-size: 20px; /*Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
position: relative; /* Задаём относительное позиционирование */
transition: all 500ms ease-out; /* Задаём анимацию с временем выполнения 500ms */
transform-style: preserve-3d; /* Трансформация показывается как 3D */
}
/* Создаём псевдо элемент - верхняя грань кнопки */
.seven:after { /* Добавляем псевдо элемент :after */
content: 'Кнопка'; /* Текст в псевдо элементе */
position: absolute; /* Позиционируем абсолютно, относительно основного блока */
top: -50%;
left: 0px;
width: 100%; /* Ширина */
background: #fdeaa8; /* Фоновый цвет */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
transform-origin: bottom; /* Точка, относительно которой будет выполнятся вращение */
transform: rotateX(90deg); /* Размещаем в горизонтальной плоскости, в результате чего псевдо элемент не виден */
}
/* Эффект при наведении */
.seven:hover { /* Добавляем псевдо класс :hover */
transform-origin: bottom; /* Определяем точку, относительно которой происходит вращение */
transform: rotateX(-90deg); /* Поворачиваем на 90 градусов */
}
</style>
</head>
<body>
<button>Кнопка</button>
</body>
</html>


Появление вращающегося текста


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид */
.eight {
background: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
background: -webkit-radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444); /* Фоновый цвет - радиальный градиент */
width: 90px; /* Ширина */
height: 40px; /* Высота */
padding: 10px; /* Внутренний отступ */
border-radius: 5px; /* Закругление углов */
box-shadow: 0px 2px 4px; /* Тень */
display: inline-block; /* Встроенный элемент */
position: relative; /* Относительное позиционирование, для абсолютного позиционирования других элементов */
text-decoration: none; /* Убираем подчёркивание текста */
}
/* Создаём псевдоэлемент - текст */
.eight:after { /* Добавляем псевдоэлемент :after */
width: 80%; /* Ширина относительно родительского блока */
color: red; /* Цвет текста */
font-family: 'Lucida Console'; /* Шрифт текста */
font-size: 18px; /* Размер текста */
text-align: center; /* Выравнивание по центру */
content: attr(title); /* Текс берётся из атрибута title */
display: block; /* Блочный элемент */
opacity: 0; /* Невидимый */
position: absolute; /* Позиционируется абсолютно */
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%; /* Точка от которой происходит анимация - центр */
-webkit-transition: all 550ms ease-in-out;
transition: all 550ms ease-in-out; /* Анимация. Для всех элементов, время - 550ms, начинается и заканчивается медленно */
-webkit-transform: scale(0) rotate(-360deg) translateY(-50%);
transform: scale(0) rotate(-360deg) translateY(-50%); /* Вращение на 360 градусов */
z-index: 3; /* Поверх всех элементов */
}
/* Эффект при наведении */
.eight:hover:after { /* Добавляем псевдокласс :hover */
opacity: 1; /* Видимый */
-webkit-transform: scale(1) rotate(0deg) translateY(-50%);
transform: scale(1) rotate(0deg) translateY(-50%); /* Точка трансформации - центр */
}
</style>
</head>
<body>
<button title="knopka" ></button>
</body>
</html>


Появление текста из глубины


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид */
.nine {
background: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444);
background: -webkit-radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#444); /* Фоновый цвет - радиальный градиент */
width: 90px; /* Ширина */
height: 40px; /* Высота */
padding: 10px; /* Внутренний отступ */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 2px 4px; /* Тень */
display: inline-block; /* Встроенный элемент со свойствами блочного */
position: relative; /* Относительное позиционирование, для абсолютного позиционирования появляющегося текста */
text-decoration: none; /* Убираем подчёркивание */
}
/* Создаём псевдоэлемент для появляющегося текста */
.nine:after {
width: 80%; /* Ширина элемента */
color: red; /* Цвет текста */
font-family: 'Lucida Console'; /* Шрифт текста */
content: attr(title); /* Текст берётся из атрибута title */
display: block; /* Блочный элемент */
font-size: 18px; /* Размер текста */
text-align: center; /* Выравнивание текста по центру */
opacity: 0; /* Невидимый */
position: absolute; /* Позиционируем абсолютно по центру родительского блока */
top: 50%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%; /* Точка начала трансформации по центру */
-webkit-transform: scale(0) translateY(-50%);
transform: scale(0) translateY(-50%); /* Масштаб 0 и отодвигаем в глубину */
-webkit-transition: all 550ms ease-in-out;
transition: all 550ms ease-in-out; /* Анимация. Для всех элементов (all), время действия 550ms, медленно начинается и заканчивается (ease-in-out) */
z-index: 3; /* Поверх всех элементов */
}
/* Эффект при наведении */
.nine:hover:after {
opacity: 1; /* Видимый */
-webkit-transform: scale(1) translateY(-50%);
transform: scale(1) translateY(-50%); /* Масштаб 1 х 1 (scale(1)), расположение по центру в глубине */
}
</style>
</head>
<body>
<button title="knopka" ></button>
</body>
</html>


Появление картинки


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Эффекты для кнопок CSS</title>
<style>
/* Внешний вид */
.ten {
color: #524E49; /* Цвет текста */
background: #F7E09C; /* Фоновый цвет */
padding: 10px 35px; /* Внутренний отступ. Определяет размер кнопки */
font-size: 20px; /* Размер текста */
border-radius: 5px; /* Закругление уголков */
box-shadow: 0px 1px 3px; /* Тень */
position: relative; /* Относительное позиционирование для абсолютного позиционирования картинки */
}
/* Картинка */
.ten img {
position: absolute; /* Позиционируем абсолютно */
top: 7px; /* По середине */
left: -30px; /* Выносим за пределы кнопки */
transition: all 200ms ease; /* Анимация появления. Время анимации 200 ms */
}
/* Эффект при наведении */
.ten:hover img {
left: 5px; /* Возвращаем картинку в кнопку */
}
</style>
</head>
<body>
<!--Картинка размещается внутри кнопки-->
<button><img src="images/Animation.gif">Кнопка</button>
</body>
</html>


Красная кнопка


CSS
.tower {
position: relative; /* Оболочка с относительным позиционированием, для абсолютного позиционирования других элементов */
}
/* Внешний вид */
.round {
position: absolute; /* Позиционируем абсолютно по оболочке. В этом случае позиции можно не указывать */
width: 70px; /* Ширина */
height: 70px; /* Высота */
border: 4px solid hsl(5, 40%, 70%); /* Рамка */
border-radius: 50%/50%; /* Делаем рамку круглой */
background: linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 80%);
background: -webkit-linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 80%); /* Фоновый цвет - линейный градиент. Цвет задан в формате hsl, но можно задать в любом доступном в веб формате */
сursor: pointer; /* Курсор в виде ладошки */
transform: rotate(30deg); /* Поворачиваем на 30 градусов */
}
/* Эффект при нажатии */
.round:active { /* Добавляем псевдокласс :active */
width: 69px; /* Уменьшаем ширину */
height: 69px; /* Уменьшаем высоту */
box-shadow: 0 0 hsl(5, 60%, 60%); /* Уменьшаем тень */
border: 3px solid hsl(5, 40%, 70%); /* Уменьшаем толщину рамки */
background: linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 90%);
background: -webkit-linear-gradient(top, hsl(0, 90%, 90%), hsl(0, 100%, 50%) 90%); /* Изменяем значения линейного градиента */
}
HTML
<div>
<!--Вместо кнопки (buttom) используется ссылка (a)-->
<a href="*"></a>
</div>


Кнопка с индикатором


CSS
/* Оболочка */
.switch {
width: 70px; /* Ширина */
height: 70px; /* Высота */
position: relative; /* Относительное позиционирование, для абсолютного позиционирования других элементов */
cursor: pointer; /* Курсор в виде ладошки */
}
/* Внутренний круг */
.dot {
position: absolute; /* Позиционируем абсолютно относительно оболочки */
top: 7%;
left: 7%;
width: 70px; /* Ширина */
height: 70px; /* Высота */
border-radius: 50%; /* Делаем круг */
background: hsl(0, 0%, 90%); /* Фоновый цвет */
box-shadow: /* Многослойная тень, наружная и внутренняя */
0 3px 5px hsl(0, 0%, 75%),
inset 0 1px 0 hsl(0, 0%, 95%),
inset 0 -5px 5px hsl(0, 0%, 75%),
inset 0 5px 5px hsl(0, 0%, 95%);
}
/* Наружный круг */
.circ {
position: absolute; /* Позиционируем абсолютно относительно оболочки по центру внутреннего */
top: 0;
left: 0;
width: 82px; /* Ширина */
height: 82px; /* Высота */
border-radius: 50%; /* Делаем круг */
background: linear-gradient(#ccc, #fff);
background: -webkit-linear-gradient(#ccc, #fff); /* Фоновый цвет - линейный градиент */
box-shadow: /* многослойная внутренняя тень */
inset 0 2px 1px hsl(0, 0%, 75%),
inset 0 -2px hsl(0, 0%, 75%);
}
/* Индикатор - псевдоэлемент */
.switch .dot:before {
content: "";
position: absolute; /* Позиционируем абсолютно по центру */
left: 40%;
top: 40%;
width: 20%; /* Ширина */
height: 20%; /* Высота */
border-radius: 50%; /* Делаем круг */
background: radial-gradient(#fff, #333);
background: -webkit-radial-gradient(#fff, #333); /* Фоновый цвет - радиальный градиент */
}
/* Эффект при нажатии */
.switch:active .dot:before {
content: "";
background: radial-gradient(#fff, #02A829);
background: -webkit-radial-gradient(#fff, #02A829); /* Меняем цвет индикатора */
}
.switch:active .dot {
background: radial-gradient(#fff, #ccc);
background: -webkit-radial-gradient(#fff, #ccc); /* Меняем фоновый цвет внутреннего круга */
width: 69px; /* Уменьшаем ширину внутреннего круга */
height: 69px; /* Уменьшаем высоту внутреннего круга */
}
HTML
<!--Оболочка-->
<div>
<!--Наружный круг-->
<div>
<!--Внутренний круг-->
<span></span>
<!--Ссылка для адреса перехода-->
<a href=""></a>
</div>
</div>


Клавиша


CSS
.switch2 {
width: 75px;
height: 45px;
position: relative;
cursor: pointer;
}
.dot1 {
position: absolute;
top: 7%;
left: 7%;
display: block;
width: 75px;
height: 45px;
border-radius: 7px;
background: linear-gradient(hsl(0, 0%, 90%), hsl(0, 0%, 96%));
box-shadow: -3px 5px hsl(0, 0%, 75%),
1px -2px hsl(0, 0%, 75%),
inset 0 0px 5px hsl(0, 0%, 95%),
inset 0 -1px 5px hsl(0, 0%, 95%);
z-index: 1;
}
.circ1 {
display: block;
position: absolute;
width: 87px;
height: 57px;
top: 0;
left: 0;
background: linear-gradient(hsl(0, 0%, 96%), hsl(0, 0%, 90%));
box-shadow:
inset 0 1px 1px hsl(0, 0%, 95%),
inset 0 -1px 1px hsl(0, 0%, 95%);
}
.dot1:before {
content: "Enter";
color: hsl(0, 0%, 60%);
position: absolute;
left: 20%;
top: 15%;
font-size: 20px;
}
.switch2:active .dot1:before {
content: "Enter";
}
.switch2:active .dot1 {
background: radial-gradient(hsl(0, 0%, 96%), hsl(0, 0%, 90%));
box-shadow: -2px 4px hsl(0, 0%, 75%),
0px -1px hsl(0, 0%, 75%),
inset 0 1px 2px hsl(0, 0%, 95%),
inset 0 -1px 2px hsl(0, 0%, 95%);
}
HTML
<div>
<div>
<a></a>
</div>
</div>


Выпуклая кнопка


CSS
.blok101{
max-width:60px;
padding: 1em;
border-radius: 10px;
background: rgb(100,100,100) radial-gradient(circle at 0 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;
}
.blok101:hover{
transform: skewX(10deg);
}
.blok101:active{
color:red;
max-width:55px;
padding: 1em;
border-radius: 8px;
background: rgb(100,100,100) radial-gradient(circle at 0 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
}
HTML
<div>Кнопка</div>


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

Желаю творческих успехов.

Текст появляющийся на изображениях CSS < < < В раздел > > > Анимация для шапки сайта

Заблокированные кнопки — отстой — CSS-LIVE

Перевод статьи DISABLED BUTTONS SUCK с сайта hackernoon.com для CSS-live.ru, автор — Хампус Сетфорс

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

Почему они меня выбесили и что заставило меня написать об этом

Пару недель назад на одном мероприятии мне оставили такое сообщение:

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

Я был так взволнован! Знаете, я обычно не очень хорош в общении с людьми, мне не по душе заводить новые знакомства. Но в этот раз. Я был на встрече. Разговаривал с интересным человеком, который попросил меня быть её другом в интернете. Вот это да!

Поэтому я бросился к телефону, открыл приложение фейсбука и нашёл её. Добравшись до экрана со скриншота ниже, всё чуть было и не кончилось:

Сначала я вообще её не увидел. Но, к счастью, у меня глаз как у орла, поэтому я всё же смог прочитать эту светло-серую надпись. «Добавить в друзья».

Увидев кнопку с текстом и иконкой, которые идеально описывали мою цель, я нажал её!

Ничего не произошло.

Может, я промахнулся?

Нажал ещё раз. Снова ничего. Я начал на неё тыкать так, будто это была кнопка обновления страницы, на которой вот-вот поступят в продажу билеты на концерт Джастина Бибера. Тоже не сработало. Почувствовал себя глупо из-за мысли, что оно вообще могло сработать.

Отвалился вай-фай? Может, мы уже и так друзья? Или я достиг лимита друзей в фейсбуке? Мой мозг кипел, перебирая возможные причины.

Оставим историю на некоторое время в покое. Приношу свои извинения! Я понимаю, что вам не терпится узнать, что же было дальше? Почему кнопка не нажималась? И могла ли заблокированная кнопка испортить дружбу?

Но, как любой хороший автор, я раскрою исход этого триллера только к концу этой статьи. #интрига

Почему заблокированные кнопки отвратительны

Вот несколько причин, почему они – гадкие штуки, готовые испортить настроение вашим пользователям.

Они заставляют пользователей кликать понапрасну

Заблокированные кнопки обычно призывают к действию своим текстом, например «Отправить», «Заказать» или «Добавить в друзья». Из-за этого они часто совпадают с тем, что пользователи намереваются сделать. Поэтому люди будут по ним кликать.

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

Их сложно разглядеть

Большинство заблокированных кнопок тяжело замечать и читать. Они заставляют щуриться и чувствовать себя на 30 лет старше. Хоть кнопка и заблокирована, её текст всё равно является ключевым для понимания контекста.

Белый текст на светло-сером фоне, серьёзно?

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

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

Совершенно невозможно понять, почему это исключение вообще присутствует в этом руководстве. Это ещё одна причина, почему не стоит слепо следовать ему (простите за каламбур). Но это ещё не всё на тему доступности, о ней будет немного позже.

Они не дают обратной связи

99% всех заблокированных кнопок ни на что не реагируют и по клику не говорят, почему же они заблокированы (источник: моё шестое чувство. Никто не изучает отключенные кнопки. Наверное, потому что они отстойны)

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

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

Они помогают разработчикам забить на обработку ошибок

Если вы работаете в сфере IT, вы наверняка ненавидите обрабатывать ошибки. «Эй, мои пользователи ни за что не совершат ошибку в моём идеальном интерфейсе!»

Вы можете подумать, что необходимость обработки ошибок может быть с лёгкостью заменена «живыми» сообщениями, появляющимися рядом с полем с некорректными данными.

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

«Тупой юзер ©, просто посмотри на моё красивое сообщение об ошибке!» – может пронестись у вас в голове.

Но у вас есть план Б! Вы рассчитываете на то, что пользователь увидит заблокированную кнопку и поймёт, что он что-то сделал не так.

К сожалению, многие пользователи не понимают, почему кнопка заблокирована. И большинство сначала понажимает её кучу раз, пока не поймёт, что что-то тут не то.

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

Они заставляют пользователей думать

Почему эта кнопка выглядит так странно? Что на ней написано? Почему она не нажимается? Что мне теперь делать?

Мало какое поле заставляет пользователя задуматься настолько сильно, насколько это делает заблокированная кнопка.

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

Заблокированные кнопки – ещё одно ограничение для людей с ограничениями

Прямо скороговорка вышла! Но оно так и есть, заблокированные кнопки приносят большие проблемы пользователям с ограниченными возможностями.

Почему? Ну, давайте представим, будто у вас плохое зрение и вы хотите зарегистрироваться на eBay:

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

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

В итоге, получится что-то такое:

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

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

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

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

Что же вместо этого делать

Просто не блокируйте кнопки! Оставьте их работающими, а по клику показывайте сообщение об ошибке.

Не верите мне? Тогда вот вам цитата из окончательного руководству по валидации форм:

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

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

Конец истории

Наверное, вам не терпится узнать продолжение истории! Почему же кнопка «Добавить в друзья» в приложении фейсбука оказалась заблокирована?

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

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

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

Так что… Заблокированные кнопки – отстой.

P.S. Это тоже может быть интересно:

41 кнопка в CSS и немного JavaScript всех видов и функций

Продолжаем очередной статьей из серии HTML, CSS и JavaScript это приносит хороший список кодов, чтобы выделить их внешний вид или удобство использования нашего веб-сайта; будь то электронная коммерция, целевая страница или сам блог.

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

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

это 3D-кнопка в CSS у него есть способность запускать анимацию по мере того, как мы продлеваем ее пульсацию.

Эта кнопка CSS перенесет нас в начало нашего сайта когда мы прошли через это.

Пузырьковая кнопка в CSS и JavaScript, которая при нажатии будет брызгать серией пузырей с яркой и соответствующей анимацией.

Una изящная анимация дает жизнь этой кнопке для добавления в CSS, который может быть одним из тех элементов, которые выделяют наш веб-сайт.

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

Мы нажимаем на это кнопка в CSS и HTML для создания анимации закрытия. Просто, но с отличным визуальным эффектом.

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

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

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

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

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

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

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

Наведение одной кнопки с большим стилем в анимации для сайтов в классическом стиле.

Un простой и любопытный эффект который увеличивает размер кнопки CSS с помощью небольшого количества HTML.

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

Три эффекта CSS в анимации для кнопки, и это можно считать отличным стилем.

Кнопка лайков для Twitter с искрометной и энергичной анимацией. Идеально подходит для тех дней в социальных сетях.

Здесь будут сердца те, кто прыгают от радости при нажатии кнопки лайка.

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

Кнопка воспроизведения, которая запустится прыгать, тоже от радости, при нажатии.

Анимация сотрет окружность вокруг значка Воспроизведение этой кнопки CSS.

Просто кнопка пауза / воспроизведение с минимальным прикосновением В дизайне.

Как будто мы нажимали кнопки на игровом контроллере с консоли, такой как XboX.

Кнопка с радуга анимация который воссоздает уведомления, приходящие на Galaxy S8.

Ящик, который открывается популярные иконки социальных сетей всеми, оставив на нем указатель мыши.

Кнопка с качественная анимация который запускается в тот момент, когда мы нажимаем на него.

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

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

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

Un кнопка поделиться отличается бесконечной циклической анимацией.

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

С прочими анимация «Gooey», эта кнопка очень впечатляет своим эффектом.

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

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

Еще одна кнопка наведения для оценка с оценкой продукт или что-то еще.

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

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

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

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

CSS кнопки с псевдо-элементами

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

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

В примерах используется шрифт «Open Sans» Steve Matteson-а.

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

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

Структура всех этих кнопок очень простая, нам нужен всего лишь один тег А для работы, так как все остальные элементы мы будем создавать при помощи псевдо-класса ::before.

HTML-разметка

<a href=»#»>
 Click me!
</a>

Пример 1

Я думаю, что это самый простой пример, с обычным CSS-кодом.

CSS

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

.a_demo_one {
 background-color:#ba2323;
 padding:10px;
 position:relative;
 font-family: ‘Open Sans’, sans-serif;
 font-size:12px;
 text-decoration:none;
 color:#fff;
 border: solid 1px #831212;
 background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);
 border-radius: 5px;
}

.a_demo_one:active {
 padding-bottom:9px;
 padding-left:10px;
 padding-right:10px;
 padding-top:11px;
 top:1px;
 background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);
}

Затем, мы создаем серый контейнер, используя псевдо-элемент ::before. Абсолютное позиционирование упростит нашу работу:

.a_demo_one::before {
 background-color:#ccd0d5;
 content:»»;
 display:block;
 position:absolute;
 width:100%;
 height:100%;
 padding:8px;
 left:-8px;
 top:-8px;
 z-index:-1;
 border-radius: 5px;
 box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}

Пример 2

Это кнопка немного сложнее из-за 3D-эффекта. Она находится вне её «контейнера», но когда вы щелкните по ней, она опускается вниз:

CSS

.a_demo_two {
 background-color:#6fba26;
 padding:10px;
 position:relative;
 font-family: ‘Open Sans’, sans-serif;
 font-size:12px;
 text-decoration:none;
 color:#fff;
 background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
 box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
 border-radius: 5px;
}

.a_demo_two:active {
 top:7px;
 background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
 box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
 color: #156785;
 text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
 background: rgb(44,160,202);
}

А это довольно сложная часть:

Так как положение псевдо-элемента зависит от его родительского элемента, то при перемещении родительского элемента вниз на несколько пикселей, мы должны на такое количество пикселов переместить вверх псевдо-элемент.

.a_demo_two::before {
 background-color:#072239;
 content:»»;
 display:block;
 position:absolute;
 width:100%;
 height:100%;
 padding-left:2px;
 padding-right:2px;
 padding-bottom:4px;
 left:-2px;
 top:5px;
 z-index:-1;
 border-radius: 6px;
 box-shadow: 0px 1px 0px #fff;
}

.a_demo_two:active::before {
 top:-2px;
}

Пример 3

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

CSS

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

.a_demo_three {
 background-color:#3bb3e0;
 font-family: ‘Open Sans’, sans-serif;
 font-size:12px;
 text-decoration:none;
 color:#fff;
 position:relative;
 padding:10px 20px;
 border-left:solid 1px #2ab7ec;
 margin-left:35px;
 background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
 border-top-right-radius: 5px;
 border-bottom-right-radius: 5px;
 box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_demo_three:active {
 top:3px;
 background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
 box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

Теперь CSS-код для псевдо-элемента:

.a_demo_three::before {
 content:»·»;
 width:35px;
 max-height:29px;
 height:100%;
 position:absolute;
 display:block;
 padding-top:8px;
 top:0px;
 left:-36px;
 font-size:16px;
 font-weight:bold;
 color:#8fd1ea;
 text-shadow:1px 1px 0px #07526e;
 border-right:solid 1px #07526e;
 background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
 border-top-left-radius: 5px;
 border-bottom-left-radius: 5px;
 box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}

.a_demo_three:active::before {
 top:-3px;
 box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}

Пример 4

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

CSS

.a_demo_four {
 background-color:#4b3f39;
 font-family: ‘Open Sans’, sans-serif;
 font-size:12px;
 text-decoration:none;
 color:#fff;
 position:relative;
 padding:10px 20px;
 padding-right:50px;
 background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
 border-radius: 5px;
 box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}

.a_demo_four:active {
 top:3px;
 background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
 box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}

.a_demo_four::before {
 background-color:#322620;
 background-image:url(../images/right_arrow.png);
 background-repeat:no-repeat;
 background-position:center center;
 content:»»;
 width:20px;
 height:20px;
 position:absolute;
 right:15px;
 top:50%;
 margin-top:-9px;
 border-radius: 50%;
 box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}

.a_demo_four:active::before {
 top:50%;
 margin-top:-12px;
 box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

Пример 5

Этот пример немного «сырой», я знаю, но вы можете попробовать его немного доработать.

CSS

.a_demo_five {
 background-color:#9827d3;
 width:150px;
 display:inline-block;
 font-family: ‘Open Sans’, sans-serif;
 font-size:12px;
 text-decoration:none;
 color:#fff;
 position:relative;
 margin-top:40px;
 padding-bottom:10px;
 padding-top:10px;
 background-image: linear-gradient(bottom, rgb(168,48,232) 100%, rgb(141,32,196) 0%);
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
 box-shadow: inset 0px 1px 0px #ca73f8, 0px 5px 0px 0px #6a1099, 0px 10px 5px #999;
}

.a_demo_five:active {
 top:3px;
 background-image: linear-gradient(bottom, rgb(168,48,232) 0%, rgb(141,32,196) 100%);
 box-shadow: inset 0px 4px 1px #7215a3, 0px 2px 0px 0px #6a1099, 0px 5px 3px #999;
}

.a_demo_five::before {
 background-color:#fff;
 background-image:url(../images/heart.gif);
 background-repeat:no-repeat;
 background-position:center center;
 border-left:solid 1px #CCC;
 border-top:solid 1px #CCC;
 border-right:solid 1px #CCC;
 content:»»;
 width:148px;
 height:40px;
 position:absolute;
 top:-30px;
 left:0px;
 margin-top:-11px;
 z-index:-1;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
}

.a_demo_five:active::before {
 top: -33px;
 box-shadow: 0px 3px 0px #ccc;
}

Заключение

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

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

Скачать исходники

Перевод статьи с tympanus.net/codrops

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

кнопок — Элементы — Spectre.css CSS Framework

Кнопки #

Buttons включают простые стили кнопок для действий различных типов и размеров.

кнопка по умолчанию
основная кнопка
кнопка ссылки

Добавьте класс btn в элементы , или для кнопки по умолчанию.Существуют классы btn-primary и btn-link для предопределенных основных кнопок и кнопок ссылок.

кнопка по умолчанию основная кнопка кнопка ссылки

Цвет пуговиц #

кнопка успеха
кнопка ошибки

Добавьте класс btn-success или btn-error для цвета кнопки успеха (зеленый) или ошибки (красный).Если вам нужно больше цветов кнопок, используйте миксины кнопок, чтобы создать свои собственные варианты цвета кнопок.

   кнопка успеха 
 кнопка ошибки 
  

Размер пуговиц #

большой
большая кнопка

нормальный
обычная кнопка

маленький
маленькая кнопка

Добавьте класс btn-sm или btn-lg для кнопок маленького или большого размера.Также вы можете добавить класс btn-block для полноширинной кнопки.

   большая кнопка 
 маленькая кнопка 

 кнопка блокировки 

  большой 
  нормальный 
  маленький 
  

Обратите внимание, что вы можете использовать класс btn-action для квадратной кнопки или добавить еще один класс s-circle для круглой кнопки, которая часто используется как плавающая кнопка действия (FAB).

Состояние кнопки #

Добавьте активный класс для стиля состояния активной кнопки.

по умолчанию активен
первично активный
ссылка активна

Добавьте класс disabled или disabled attribute для стиля состояния отключенной кнопки.

по умолчанию отключено
первичный инвалид
ссылка отключена

  
 отключенная кнопка 
 отключенная кнопка 
  

Кнопка с классом loading может отображать индикатор загрузки.

кнопка по умолчанию
основная кнопка
кнопка ссылки

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

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

первая кнопка
вторая кнопка
третья кнопка

первая кнопка
вторая кнопка
третья кнопка

первая кнопка
вторая кнопка
третья кнопка

первая кнопка
вторая кнопка
третья кнопка

Если вы хотите использовать кнопки как группу, добавьте в контейнер класс btn-group .Вы можете добавить класс btn-group-block для полноразмерной группы кнопок.

  

   первая кнопка 
   вторая кнопка 
   третья кнопка 

  

Button API — Material-UI

Документация по API компонента Button React. Узнайте больше о реквизитах и ​​точках настройки CSS.

Импорт

  Кнопка импорта из '@ material-ui / core / Button';

импортировать {Button} из '@ material-ui / core';  

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

Имя компонента

Имя MuiButton может использоваться для предоставления свойств по умолчанию или переопределений стиля на уровне темы.

Стойка

Ссылка перенаправляется в корневой элемент.

Любые другие предоставленные реквизиты будут предоставлены корневому элементу (ButtonBase).

CSS

Вы можете переопределить стиль компонента благодаря одной из этих точек настройки:

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

Наследование

Также доступны свойства компонента ButtonBase.
Вы можете использовать это поведение для нацеливания на вложенные компоненты.

Демонстрации

Центральная кнопка CSS

В этом руководстве объясняется, как центрировать кнопку CSS .

Центральная кнопка CSS

Основная цель CSS (каскадных таблиц стилей) — предоставить лучший стиль для веб-страницы HTML. Используя CSS, вы можете указать расположение всех элементов страницы. Вы можете выравнивать элементы как по горизонтали, так и по вертикали. Кнопка CSS должна быть выровнена по центру, если вы хотите, чтобы она располагалась по центру внутри div или в центре веб-страницы.

Вы можете выровнять кнопку CSS по центру, используя следующий метод:

1.Поместив свойство text-align тега body в центр (text-align: center)

В этом примере мы используем свойство `text-align` center в теге , поэтому все внутри тега будет автоматически выровнено по центру .

  


    
    <стиль>
        тело {
            выравнивание текста: центр;
        }
    


     Наведите меня!  
  

Код запуска

Выход

2.Установив свойство

text-align родительского тега div на center ( text-align: center )

В этом примере ниже мы используем свойство `text-align` center в теге

  



    
    
    <стиль>
        .button-container-div {
            выравнивание текста: центр;
            граница: сплошной коралл 1px;
            высота: 40vh;
            ширина: 50вв;
        }
    


    

         Наведите меня! 
    

  

  



    
    
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            маржа: авто;
        }
    


    

         Наведите меня! 
    

  

  




    
    
    <стиль>
        кнопка {
           положение: фиксированное;
           осталось: 50%;
        }
    


    

         Наведите меня! 
    



  

  




    
    
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            граница: 1px solid # ff8899;
            дисплей: гибкий;
            justify-content: center;
            align-items: center;
        }
    


    

         Наведите меня! 
    

  

  


    
    
    <стиль>
        .button-container-div {
            ширина: 300 пикселей;
            высота: 300 пикселей;
            граница: 1px solid # ff8899;
            дисплей: сетка;
        }
        кнопка {
            цвет фона: малиновый;
            цвет: #fff;
            граница: сплошная 1px;
            отступ: 10 пикселей;
            ширина: 100 пикселей;
            наброски: нет;
            маржа: авто;
        }
    


    

         Наведите меня!