Кнопка с анимацией для сайта на CSS
В данном уроке реализуем простой вариант анимированной кнопки на CSS. Задействуем в уроке псевдоэлементы ::before и ::after, для анимированного появления используем transition, а при помощи position и overflow, от центруем кнопку и скроем все лишнее за ее пределами.
See the Pen QOZGbj by Denis (@Dwstroy) on CodePen.
Создаем кнопка с анимацией для сайта
Создаем файл index.html , пропишу тут заголовок «Button — анимированный блик на CSS». Создаем еще файл стилей, и подключаем его к странице.
В теле странице делаем блок с классом .dws , у которого будет одно назначение, центровать кнопку посередине экрана, а в нутрии блока, прописываем ссылку с классом .butt для ее стилилизации, и текст самой кнопки пишем button .
На этом с index файлом работа заканчивается, и переходим в файл стилей.
Оформляем ссылку под стиль кнопки
Первым делом выравниваем ссылку посередине экрана.
Вторым этапом, оформим ссылку под вид кнопки.
Делаем об водку в три пикселя, шрифт побольше, задаем цвет, уберем подчеркивание, делаем все буквы заглавными, делаем ширину и высоту, но так как ссылка сейчас встроенный элемент, присваиваем ей ( display: block; ) тем самым сделали ее блочным.
Затем, выравниваем текст посередине, и по высоте. Давайте еще заменим шрифт на Arial .
Создаем и анимируем псевдоэлементы
Теперь приступим к описанию псевдо элементов. Для того что бы они позиционировались относительно нашей кнопки, добавим кнопке стиль ( position: relative; ). Создаем псевдоэлемент before , позиционируем его абсолютно кнопки, прописываем ( content: »; ), ширину и высоту указываем текущей кнопки, и зададим цвет.
Выравниваем его по левому краю, а так как это блик, сделаем его немного прозрачней.
Cразу анимируем его при наведении, а потом по такой же схеме сделаем второй псевдоэелемент.
Для анимации, нам нужно текущий псевдоэлемент передвинуть в нулевое положение, то есть, что бы он занял область кнопки.
Обращаемся к кнопке при помощи псевдокласса, и указываем у нее отступы слева в ноль.
Затем, для плавности анимирования заполнения бликом кнопки, присвоим псевдоэлементу ( transition: .5s; ). Изменим цвет шрифта кнопки при наведении на белый.
Для того что бы отобразить текст, сделаем псевдоэлемент по индексу ниже ( z-index: -1; )
Теперь опишем второй блик, и для этого создаем псевдоэлемент ::after .
Для ::after отдельный делаем стиль, где убираем прозрачность.
И добавляем псевдоэлемент при наведении.
Теперь они при наведении равномерно передвигаются вправо, и что бы их разделить воспользуемся transition-delay , это свойство позволяет задать задержу при анимации. Что бы второй псевдоэлемент передвигался чуть позже.
Можно задержку указать чуть больше, но в данном случае псевдоэлемент при возвращении закрывает текст. Что бы это исправить, добавим для кнопки анимацию в пол сек. ( transition: .5s; ). В данном случае текст не успевает исчезнуть пока before возвращается в начальное положение.
Так, и в принципе остается добавить ( overflow: hidden; ), что бы скрыть все за пределами кнопки и мы получили такую простенькую анимацию.
Попробуйте поиграться с настройками, с позиционируйте элементы по разным краям и сводите их при наведении, а результатом обязательно делитесь в комментариях.
Как создать мигающую/светящуюся кнопку с помощью анимации в CSS3
В этой статье мы покажем, как создать мигающую/светящуюся кнопку, используя только CSS. Здесь вам не нужно использовать JavaScript. Просто выполните следующие шаги и попробуйте примеры!
1. Создайте ссылку и кнопку.
Прежде всего создадим ссылку и кнопку в таком виде:
2. Добавьте оформление к кнопке.
Дальше необходимо указать внешний вид кнопки с помощью CSS свойств:
3. Добавьте анимацию к кнопке:
Нам нужны ключевые кадры, чтобы добавить анимацию. Анимация содержит три ключевых кадра. Каждый из них определяет новые значения для свойств background color и the box-shadow.
Building a Magical 3D Button
I had a neat realization recently: Buttons are the “killer feature” of the web.
Every significant thing we do online, from ordering food to scheduling an appointment to playing a video, involves pressing a button. Buttons (and the forms they submit) make the web dynamic and interactive and powerful.
But so many of those buttons are lackluster. They can trigger enormous changes in the real world, but they don't feel tangible at all. The feel like dull everyday pixels.
In this tutorial, we'll build a whimsical 3D button:
This is an intermediate-level tutorial for front-end developers. It's focused on HTML/CSS, no JavaScript knowledge required.
If you're relatively new to CSS transitions, I'd recommend reading “An Interactive Guide to CSS Transitions” first.
There's one main trick we'll use a couple times in this tutorial to create the illusion of a 3D button.
Here's how it works: when the user interacts with our button, we'll slide a foreground layer up and down, in front of a stationary background:
(Try sliding the "Reveal" slider, and then interacting with the button!)
Why not use box-shadow or border ? Those properties are super expensive to animate. If we want a buttery-smooth transition on the button, we'll have way more success with this strategy.
Here's our MVP button in code:
Code Playground
Our button element provides the burgundy background color that simulates the bottom edge of our button. We also strip away the default border/padding that comes with button elements.
.front is our foreground layer. it gets a bright pink-crimson background color, as well as some text styles.
We'll slide the foreground layer around with transform: translate . This is the best way to accomplish this effect, since transforms can be hardware-accelerated.
While the mouse is held down on the button, the :active styles will apply. We'll shift the front layer down so that it sits 2px above the bottom. We could drop it to 0px, but I want to keep the 3D illusion going at all times.
We've created a solid foundation, and now it's time to build some cool stuff on top of it!
Most browsers will add an outline to a button when it's clicked, to indicate that the element has captured focus.
Here's what this looks like by default, on Chrome / MacOS:
In the MVP above, I took the liberty of adding an outline-offset declaration. This property gives our button a bit of a buffer:
This is a dramatic improvement, but it's still a bit of an eyesore. Plus, it doesn't work consistently: on Firefox, outline-offset doesn't work for the default "focus" outlines.
We can't simply remove it, though—that outline is super important for folks who navigate using their keyboard. They rely on it to let them know which element is focused.
Fortunately, we can use a swanky CSS pseudo-class to help us out: :focus-visible
Code Playground
That's one heck of a selector, so let's break it down.
The :focus pseudo-class will apply its declarations when an element is focused. This works regardless of whether the element is focused by tabbing to it on the keyboard, or by clicking it with a mouse.
:focus-visible is similar, but it only applies when the element is focused and the user would benefit from seeing a visual focus indicator (because they're using a keyboard to navigate, for example).
Finally, :not allows us to mix in some logic. The styles will apply when the element matches the :focus selector, but not the :focus-visible selector. In practical terms, this means that we'll hide the outline when the button is focused and the user is using a pointer device (eg. a mouse, a trackpad, a finger on a touchscreen).
I'll be honest about it: the rule above is pretty confusing!
Is there a clearer way we could accomplish the same effect? What if we wrote it like this instead?
revert is a special keyword that will revert back to whatever the value ought to be, based on the browser's defaults * . In Chrome on MacOS, this equates to a solid blue line.
It's simpler, right? We're saying “Hide the outline, except when visibly focused”.
Unfortunately, however, this alternative method has a problem: it doesn't work in older browsers.
In most browsers, clicking a button will focus it. Depending on your browser and operating system, however, this might not be true for you!
MDN has a great writeup that covers how different browsers behave when clicking buttons.
Additionally, in Safari, buttons can be focused via “Option + Tab”. In other browsers, the “Tab” key alone is sufficient.
So, in real life, buttons don't rise up to meet your finger before you press on it.
But wouldn't it be cool if they did?
Let's shift the button up by a few pixels when they hover. Also, let's slap a transition on the front layer. This will animate the state changes, producing a more fluid interaction.
4 простых эффекта CSS для кнопок
В данном уроке рассматриваются четыре очень простых кнопки CSS с эффектами анимации при наведении курсора мыши на них.
Общие установки
Прежде чем разбираться с кнопками, рассмотрим общие для всех них установки.
Для кнопок будет использоваться очень простой HTML код:
Также все кнопки будут иметь общие установки для текста надписи и отмену выделения ссылок:
Увеличивающаяся кнопка
Обычно, пользователь ожидает достаточно мягкого эффекта при навдении курсора мыши на ссылку или кнопку. А в нашем случае кнопка меняет размер — она увеличивается, показывая дополнительное сообщение.
Основной код CSS
Для начала нам нужно только задать кнопке форму и цвет. Определяем высоту 28px и ширину 115px, добавляем поля и отступы, а также задаем кнопке светлую рамку.
Эффекты CSS3
Некоторым людям нравится, когда простая кнопка сопровождается достаточно большим кодом CSS. В данном разделе приводятся дополнительные стили CSS3 для нашей кнопки. Вполне можно обойтись и без них, но они придают кнопке более современный вид.
Округляем углы рамки и добавляем градиент. Здесь используется небольшой трюк с темным градиентом, который взаимодействует с любым цветом фона.
Анимация CSS
Теперь установим переход CSS. Анимация будет использоваться для любых изменений свойств и длиться полсекунды.
Наведение курсора мыши
Осталось только добавить стиль для расширения кнопки при наведении курсора мыши на нее. Кнопка должна иметь ширину 230px для отображения всего сообщения.
Простое изменение тональности цвета
Очень простой и популярный эффект CSS для кнопки. При наведении курсора мыши плавно меняется тональность фонового цвета.
Основной код CSS
Код CSS очень похож на предыдущий пример. Используется другой цвет фона и немного изменена форма. Также центрируется текст и установлена высота строки для кнопки, чтобы происходило вертикальное центрирование.
Эффекты CSS3
Устанавливаем скругление углов, градиент для фона и дополнительную тень. С помощью rgba делаем тень черной и прозрачной.
Анимация CSS
Анимация практически не отличается от предыдущего примера.
Наведение курсора мыши
При наведении курсора мыши будет устанавливаться другой цвет фона. Попробуйте выбрать более светлый вариант цвета в Photoshop, чтобы получился отличный эффект.
Сдвиг фонового изображения
Данный эффект может получиться весьма впечатляющим в зависимости от выбора фонового изображения. В демонстрации используется невзрачный фон и эффект выглядит невзрачно. Попробуйте использовать другую картинку и может получиться ошеломляющий эффект.
Основной код CSS
Основная часть кода не отличается от предыдущих примеров. Обратите внимание на то, что мы используем фоновое изображение. Начальное положение фона установлено в «0 0». При наведении курсора положение сдвигается по вертикали.
Эффекты CSS3
В данном примере нет ничего особенного — скругленные углы и тени.
Анимация CSS
Анимация для данного случая длится дольше, чтобы создать плавный и интересный эффект.
Наведение курсора мыши
Теперь пришла пора сдвигать фоновое изображение. Начальное положение было «0 0». Устанавливаем второй параметр в значение 150px. Для сдвига по горизонтали требуется изменить первый параметр.
3D имитация нажатия кнопки
Последний пример в нашем уроке посвящен популярному методу 3D имитации нажатия кнопки при наведении на нее курсора мыши. Анимация для данного случая настолько проста, что даже не требуется задавать переход CSS. Но конечный результат получается вполне впечатляющим.
Основной код CSS
Код CSS для нашей кнопки.
Эффекты CSS3
В данном случае CSS3 перестает быть приятным опционом. Для получения эффекта требуются тени и градиент. Резкая тень создает видимость 3D кнопки.
Наведение курсора мыши
В данном случае мы имеем самую большую секцию hover . Длина тени уменьшается, и с помощью полей создается смешение темной зоны. Все вместе создает иллюзию нажатия кнопки. Переворот градиента усиливает эффект.