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

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

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-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 может использоваться для предоставления свойств по умолчанию или переопределений стиля на уровне темы.

Стойка

Название Тип По умолчанию Описание
детский узел Содержимое кнопки.
классы объект Переопределить или расширить стили, примененные к компоненту. См. CSS API ниже для получения более подробной информации.
цвет «по умолчанию»
| ‘унаследовать’
| «первичный»
| ‘вторичный’
‘по умолчанию’ Цвет компонента. Он поддерживает те цвета темы, которые имеют смысл для этого компонента.
компонент elementType ‘пуговица’ Компонент, используемый для корневого узла.Либо строка для использования HTML-элемента, либо компонента.
отключен булев ложь Если истинно , кнопка будет отключена.
отключить высоту булев ложь Если истинно , высота не используется.
disableFocusRipple булев ложь Если истинно , пульсация фокуса клавиатуры будет отключена.
disableRipple булев Если истинно , эффект пульсации будет отключен.
⚠️ Без ряби нет стиля для: focus-visible по умолчанию. Обязательно выделите элемент, применив отдельные стили с focusVisibleClassName .
endIcon узел Элемент помещен после детей.
полная ширина булев ложь Если истинно , кнопка займет всю ширину своего контейнера.
href строка URL-адрес, на который следует ссылаться при нажатии кнопки. Если определено, элементы и будут использоваться в качестве корневого узла.
размер большой
| «средний»
| ‘small’
‘средний’ Размер кнопки. small эквивалентен плотному стилю кнопок.
startIcon узел Элемент помещен перед детьми.
вариант «содержит»
| «изложил»
| ‘текст’
‘текст’ Вариант использования.

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

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

CSS

Название правила Глобальный класс Описание
корень .Корень MuiButton Стили, примененные к корневому элементу.
этикетка .MuiButton-label Стили, примененные к элементу span, который охватывает дочерние элементы.
текст .MuiButton-text Стили, применяемые к корневому элементу, если option = "text" .
текст Основной .MuiButton-textPrimary Стили, применяемые к корневому элементу, если option = "text" и color = "primary" .
текст вторичный .MuiButton-textSecondary Стили, применяемые к корневому элементу, если option = "text" и color = "secondary" .
в общих чертах .MuiButton с контуром Стили, применяемые к корневому элементу, если option = "outlined" .
контурное первичное .MuiButton-outlinedPrimary Стили, применяемые к корневому элементу, если option = "outlined" и color = "primary" .
в общих чертах Вторичный .MuiButton-outlinedВторичный Стили, применяемые к корневому элементу, если option = "outlined" и color = "secondary" .
содержит . Содержит MuiButton Стили, применяемые к корневому элементу, если option = "contains" .
Содержит Первичный .MuiButton-containPrimary Стили, применяемые к корневому элементу, если option = "содержал" и color = "primary" .
содержащиеся вторичные .MuiButton-contained Вторичный Стили, применяемые к корневому элементу, если option = "содержал" и color = "secondary" .
отключить высоту .MuiButton-disableElevation Стили, применяемые к корневому элементу, если disableElevation = {true} .
focusVisible .Mui-focusVisible Псевдокласс, применяемый к корневому элементу ButtonBase, если кнопка находится в фокусе клавиатуры.
отключен .Mui-отключен Псевдокласс, применяемый к корневому элементу, если disabled = {true} .
цвет Наследовать .MuiButton-colorInherit Стили, применяемые к корневому элементу, если color = "inherit" .
текстРазмерМаленький .MuiButton-textSizeSmall Стили, применяемые к корневому элементу, если size = "small" и option = "text" .
textSizeLarge .MuiButton-textSizeLarge Стили, применяемые к корневому элементу, если size = "large" и option = "text" .
с контуром Размер Мелкий .MuiButton-outlinedSizeSmall Стили, применяемые к корневому элементу, если size = "small" и option = "outlined" .
контурный Размер Большой .MuiButton-outlinedSizeLarge Стили, применяемые к корневому элементу, если size = "large" и option = "outlined" .
содержится Размер Мелкий .MuiButton-containSizeSmall Стили, применяемые к корневому элементу, если size = "small" и option = "contains" .
Содержит Размер Большой .MuiButton-containSizeLarge Стили, применяемые к корневому элементу, если size = "large" и option = "contains" .
размер Малый .MuiButton-sizeSmall Стили, применяемые к корневому элементу, если size = "small" .
размерБольшой .MuiButton-sizeLarge Стили, применяемые к корневому элементу, если size = "large" .
полная ширина .MuiButton-fullWidth Стили, применяемые к корневому элементу, если fullWidth = {true} .
startIcon .MuiButton-startIcon Стили, применяемые к элементу startIcon, если он указан.
endIcon .MuiButton-endIcon Стили, применяемые к элементу endIcon, если он указан.
значок Размер Маленький .MuiButton-iconSizeSmall Стили, применяемые к элементу значка, если он указан, и size = "small" .
icon Размер Средний .MuiButton-iconSizeMedium Стили, применяемые к элементу значка, если он указан, и size = "medium" .
iconРазмерБольшой .MuiButton-iconSizeLarge Стили, применяемые к элементу значка, если он указан, и size = "large" .

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

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

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

Также доступны свойства компонента 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), поэтому все внутри этого

будет автоматически выровнено по центру. .

  



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


    

Код запуска

Выход

3. Отцентрируйте кнопку CSS с помощью поля

auto ( margin: auto )

В этом примере мы используем свойство `margin` auto.Margin auto перемещает div в центр экрана.

  



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


    

Код запуска

4.Центральная кнопка CSS с фиксированным положением

В этом примере мы задаем поле 50% с левой стороны страницы, а затем мы берем положение : фиксированный , чтобы он отрегулировал положение в центре тела.

  




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


    

Код запуска

4.Установив для свойства

display значение flex ( display: flex )

В этом примере мы используем гибкое свойство `display`, , ` justify-content` и `align-items` для родительского тега

с классом (button-container-div). Кнопка внутри

займет место в центре вертикального и горизонтального положения.

  • Изгиб дисплея переместит его к центру по вертикали.
  • Justify-content перемещает кнопку в центр по горизонтали.
  • Центр выравнивания элементов сохраняет его в центре; в противном случае он будет начинаться с div и идти внизу div.
  




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


    

Код запуска

Выход

 

3.Установив для свойства

отображение сетку (отображение : сетка )

В этом примере мы используем свойство сетки `display` в теге

с классом (button-container-div) . Кнопка внутри

займет место в центре вертикального и горизонтального положения.

  


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


    

Код запуска

Выход

классов кнопок CSS — NIU

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

Стандартные кнопки

Все кнопки должны иметь класс .btn . Измените цвет, добавив .btn-primary или .btn-default к тегу ссылки.


Размеры

Добавьте .btn-lg , .btn-sm или .btn-xs для дополнительных размеров.


Выравнивание

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


Ширина кнопки

Сделайте кнопку, занимающую всю ширину родительского контейнера, добавив .БТН-блок .

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

Совет: чтобы центрировать столбец, используйте .col - * - x и .col-offset - * - y , где x — четное число, а 4 ≤ x ≤ 10, y — ([ 12 — x] / 2), а * — это префикс размера, например xs , sm , md или lg .См. Документацию Bootstrap о смещении столбцов.

Эта демонстрация работает только на экране размером см от и выше. Вы сейчас на xs .


Иконки

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


Перенос текста

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

Кнопка

CSS · GitHub Кнопка

CSS · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

Кнопка CSS

/ *** Источник: http: //partletree.ru / features / rediscovering-the-button-element / *** /
/ * КНОПКИ * /
. Кнопки a,. Кнопки кнопка
{
дисплей: блочный;
поплавок: левый;
margin: 0 7px 0 0;
цвет фона: # f5f5f5;
граница: сплошная 1px #dedede;
border-top: 1px solid #eee;
граница слева: 1px solid #eee;
семейство шрифтов: «Lucida Grande», Tahoma, Arial, Verdana, без засечек;
размер шрифта: 100%;
высота строки: 130%;
оформление текста: нет;
font-weight: жирный;
цвет: # 565656;
курсор: указатель;
отступ: 5px 10px 6px 7px; / * Ссылки * /
}
.кнопки кнопка
{
ширина: авто;
перелив: видимый;
отступ: 4px 10px 3px 7px; / * IE6 * /
}
.buttons кнопка [тип]
{
отступ: 5px 10px 5px 7px; / * Firefox * /
высота строки: 17 пикселей; / * Safari * /
}
*: кнопка first-child + html [тип]
{
отступ: 4px 10px 3px 7px; / * IE7 * /
}
.кнопки кнопка img, .buttons a img
{
margin: 0 3px -3px 0! Important;
отступ: 0;
граница: отсутствует;
ширина: 16 пикселей;
высота: 16 пикселей;
}
/ * СТАНДАРТ * /
кнопка: наведение,.кнопки a: hover
{
цвет фона: # dff4ff;
border: 1px solid # c2e1ef;
цвет: # 336699;
}
. Кнопки a: активны {
цвет фона: # 6299c5;
border: 1px solid # 6299c5;
цвет: #fff;
}
/ * ПОЛОЖИТЕЛЬНЫЙ * / кнопка.положительный, кнопки а. положительный
{
цвет: # 529214;
}
. Кнопки а. Положительный: наведение, кнопка. Положительный: наведение
{
цвет фона: # E6EFC2;
граница: сплошная 1 пиксель # C6D880;
цвет: # 529214;
}
.кнопки а.положительные: активные
{
цвет фона: # 529214;
border: 1px solid # 529214;
цвет: #fff;
}
/ * ОТРИЦАТЕЛЬНЫЙ * /. Кнопки a. отрицательный, button.negative
{
цвет: # d12f19;
}
.кнопки a.negative: hover, button.negative: hover
{
фон: # fbe3e4;
граница: сплошная 1px # fbc2c4;
цвет: # d12f19;
}
. Кнопки a. Отрицательный: активный
{
цвет фона: # d12f19;
граница: сплошная 1px # d12f19;
цвет: #fff;
}

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

Как создавать ссылки кнопок CSS

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

  1. Сначала установите внешний вид кнопки в определении стиля для тега a . Следующий код создает блок вокруг текста светло-зеленого цвета (Saltpan) с указанными шрифтами и размером шрифта, а также полями и границами.
      a {
    дисплей: блок;
    цвет фона: # eaf1dd;
    цвет: # 060;
    текстовое оформление: нет;
    семейство шрифтов: Verdana, Geneva, sans-serif;
    размер шрифта: 1.5em;
    отступ: 6px 4px;
    маржа: 4 пикселя;
    граница справа: сплошной цвет 2px # 999999;
    нижняя граница: 2px solid # 999999;
    ширина верхней границы: 0 пикселей;
    ширина левой границы: 0 пикселей;
    }  
  2. Затем добавьте псевдоклассы, определяющие, как текст будет выглядеть, когда он наведен и активен.
      a: парение
    {
    цвет: # 030;
    граница: 1px solid # 9999ff;
    }
    
    а: активный
    {
    цвет: #aca;
    граница слева: 2px solid # 030;
    граница сверху: 2px solid # 030;
    ширина правой границы: 0 пикселей;
    ширина нижней границы: 0 пикселей;
    }  
  3. Затем добавьте ссылки.
        
  4. Полный код выглядит так:
      
    
    
    
     Кнопки ссылок CSS 
    
    
    
    

    Ссылки на кнопки

    И теперь у вас есть что-то вроде кнопок для ваших ссылок.

50+ примеров наведения кнопок CSS из CodePen 2018

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

Поэтому, когда мне нужно разработать кнопки и их анимацию наведения, я предпочитаю сначала поискать вдохновение по сторонам. Мое самое любимое место для этого — CodePen. Вот список эффектов наведения кнопки CSS, которые я собрал, чтобы вы начали. Я надеюсь, вам понравится!

CSS-эффекты кнопки отправки при наведении курсора

Простые, но привлекательные эффекты наведения кнопок отправки CSS за счет анимации псевдоэлементов «: before» и «: after».

CSS-эффекты при наведении курсора на кнопку

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

Эффекты при наведении курсора на кнопку

Я создал восемь эффектов наведения кнопки на чистом CSS с помощью box-shadow. Каждая кнопка имеет свой уникальный эффект. В основном я использовал box-shadow для создания эффектов, но я также включил такие эффекты, как letter-spacing и border-radius, чтобы придать анимации более динамичный контраст.

Три простых эффекта наведения кнопки CSS

Три CSS-анимации наведения курсора на кнопки с крутыми переходами.

Анимация кнопки-призрака

Это было то, что я быстро создал на основе броска Николы Поповича на Dribbble.

Анимированная кнопка с градиентом при наведении курсора

Я переделываю кнопку-призрак на своем веб-сайте. Это один из возможных вариантов дизайна моего следующего веб-сайта.

Эми Уайнхаус Doc Button

Давно хотел сделать эту кнопку, и наконец добрался до нее.

Шесть анимаций наведения кнопок на чистом CSS

Шесть потрясающих анимаций кнопок с использованием только чистого CSS3.

Анимированная кнопка-призрак

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

Анимация наведения кнопки

Набор анимаций при наведении курсора мыши.

Button.css: Анимация кнопок CSS3

Коллекция анимаций кнопок CSS3.

8-битный CSS Hovers

8-битных эффектов наведения кнопки.

См. Pen 8-bit CSS Hovers от tstoik (@tstoik) на CodePen.

Анимированные кнопки наведения SVG

Многим людям понравились кнопки, которые я сделал для своего веб-сайта, поэтому я собрал CodePen и добавил комментарии. Это чистая реализация некоторых кнопок SVG в HTML / CSS с классным эффектом наведения. Цвета и формы могут быть изменены в соответствии с вашими потребностями.

Контейнеры для ящиков / кнопок

HTML / CSS окна и эффекты наведения курсора кнопки.

Кнопка Исследовать

Этакий экспериментальный кнопочный переход.

См. Кнопку Pen Button Explore от vanderlanth (@vanderlanth) на CodePen.

Состояния наведения кнопки

Эффектные CSS состояния наведения для кнопки.

Кнопка анимации

Практика анимации семи кнопок beant на основе CSS-фонов.

См. Кнопку Pen Animation Button от lichin-lin (@ lichin-lin) на CodePen.

Кнопка OK CSS

CSS-эффект наведения курсора на значки анимации.

См. Кнопку CSS Pen OK от fixcl (@fixcl) на CodePen.

Кнопка Cool Beans 60 кадров в секунду

Мы можем легко сделать наши анимированные кнопки более производительными. Используйте трансформации и прозрачность только для анимации. Затем используйте «will-change: transform»; чтобы браузер знал, какие анимации ждут впереди.

Эксперимент с анимацией кнопок

Еще одно быстрое перо с анимацией кнопок, основанное на понравившейся мне публикации на Dribbble Даниэля Джеча.

Игровая кнопка с эффектом наведения

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

Цветные кнопки CSS

Коллекция различных типов кнопок CSS разного цвета.

Коллекция эффектов при наведении курсора на кнопки

Несколько примеров ярких эффектов наведения кнопки. В настоящее время обновляю эту ручку. Работа в процессе…

Кнопка Blobs

Изначально я нашел эту кнопку на этом сайте — https://isl.co/ и воссоздал ее.

См. Кнопку Pen Blobs автора suez (@suez) на CodePen.

Кнопка анимации CSS

Изящный и простой эффект наведения курсора мыши на кнопку.

Пуговицы наполовину полнее

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

Контактная кнопка

Контактная кнопка от Dribbble снята с использованием только CSS.

См. Кнопку контакта с пером от ajerez (@ajerez) на CodePen.

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

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

Эффекты при наведении курсора на кнопку

Некоторые эффекты наведения кнопки с использованием псевдоэлементов и границ.

Анимация контура кнопки при наведении курсора

На основе кнопок «Подробнее», которые можно найти здесь: http://kenjiendo.com/news/

Эффект наведения кнопки анимации

Стиль наведения кнопок CSS, вдохновленный Pokemon GO, создан для практики.

Star Trek LCARS-style кнопки Ghost

В одном из наших последних проектов с местной фирмой по информационной безопасности мы выбрали техническую тему. Эти кнопки вдохновлены компьютерным интерфейсом из «Звездного пути» с небольшими добавленными эффектами перехода при наведении курсора.

Анимированные кнопки CSS3

Экспериментальные кнопки CSS от Designify.me

CSS Интерактивные кнопки

Вдохновение для новых способов создания интерактивных кнопок с использованием линейных градиентов, теней блоков и псевдоклассов!

Концепция анимированной кнопки-призрака с градиентом

Кнопка призрак.

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

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