| Kosten | Четверг, 31 Мая 2018, 21:10 | Сообщение 1 |
| Здесь предоставлены простые кнопки и 8 эффектор, которые все разные, но по своему оригинальнее. Здесь отличный выбор под любой дизайн сайта. Так как изначально все они созданы на чистом CSS, где остается самому выбрать. Также если по палитре цвета не подходит, все быстро меняется в стилях кнопки, которые каждому элементу привязаны. Благодаря поддержке стилистики CSS3, которая увеличивающейся с каждой новой версией для каждого обновленного браузера, и эти утомительные браузеры с CSS2, медленно снижающие диаграммы использования, что найдете огромный выбор возможностей для эффективного наведения, что происходит при наведении.
Почти все призывы к действиям, которые вы видите в сети интернете, используют какую-то форму анимации, что идет при наведении, так как они отлично сопровождают внимание, где безусловно интернет сайт автоматически становится привлекательнее. Они действительные под многие функций, отлично будут смотреться на темном фоне, так как эффект идет светлый, только если саму гамму цвета не изменить. Здесь идет сама основа кнопки, это каркас, где присутствует на всех вариациях, только остается изменить эффекты анимации, которые по своему формату совершенно по-разному смотрятся. Где самостоятельно добавил обвод, что гораздо больше стороны стали видны под эффект выплывание прозрачного элемента.
Приступаем к установке:
Как и прежде, мы собираемся начать с очень простого HTML, на котором можно повесить наши эффекты:
Код <button>ZORNET.RU</button>
Мы также будем использовать основной набор стилей CSS для всех переходов и анимации. Мы просто устанавливаем некоторые простые значения по умолчанию, такие как цвет фона и размер шрифта.
Единственное действительно важное правило, это последний переход, все 500 мс легкость, что означает хотим, чтобы все свойства отображались при изменении в течение 500 миллисекунд.
Код button {
border: none;
background: #217aa7;
color: #f9f4f4;
padding: 9px;
font-size: 17px;
border-radius: 5px;
position: relative;
box-sizing: border-box;
transition: all 500ms ease;
cursor: pointer;
text-shadow: 0 1px 0 #211f1f;
border: 2px solid #dbdbdc;
}
Это сама основа кнопки, что перерь переходим в эффектам.
1. ГОРИЗОНТАЛЬНОЕ ПОГРУЖЕНИЕ
Стиль, который все больше и больше можно замечать в сети на сайтах в последнее время, это тот где полупрозрачный цвет фона заставляет кнопку казаться погруженной в зависание. Обычно это происходит с одной стороны и переходит до тех пор, пока вся кнопка не будет закрыта.
Код button:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 38px;
background: rgba(232, 228, 228, 0.48);
border-radius: 3px;
transition: all 2s ease;
}
button:hover:before {
width: 100%;
}
Этот контент абсолютно позиционируется и помещается в верхнем левом углу кнопки. Здесь ширина идет 0px, потому что это то, что мы будем анимировать.
Демонстрация
2. ВЕРТИКАЛЬНОЕ ПОГРУЖЕНИЕ
CSS
Код button:before {
content:'';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 0px;
background: rgba(232, 230, 230, 0.39);
border-radius: 5px;
transition: all 2s ease;
}
button:hover:before {
height: 41px;
}
Демонстрация
3. КНОПКА GHOST
В этом маленьком фрагменте мы добавим простой, но очень эффективный переход к кнопке. Эффект кнопки призрака заключается в том, что мы инвертируем цвет кнопки и добавляем границу.
CSS
Код button:hover {
background: rgba(19, 18, 18, 0);
color: #2f6480;
box-shadow: inset 0 0 0 3px #295e79;
}
При наведении курсора я установил фон как прозрачный, чтобы он собирал окружающий фон элемента.
Демонстрация
4. ИКОНА АНИМАЦИЯ
Этот эффект отлично подходит для функций, таких как добавление предмета в корзину или отправка формы. Что мы сделаем, так это включить слайд значок и появиться рядом с текстом, когда пользователь наведет курсор на кнопку.
CSS
Первое, что нужно сделать, это добавить немного кнопки к кнопке, чтобы освободить место для значка и установить переполнение в скрытое:
Код button{
padding: 9px 34px;
overflow:hidden;
}
Следующим шагом будет добавление значка корзины (здесь используются Font Awesome для значка) в элементе перед псевдоэлементом и поместите его за пределы кнопки:
Код button:before {
font-family: FontAwesome;
content:"\f07a";
position: absolute;
top: 10px;
left: -29px;
transition: all 200ms ease;
}
Теперь все, что нам нужно сделать, это анимировать значок, установив его свойство left:
Код button:hover:before {
left: 7px;
}
Демонстрация
5. ЭФФЕКТ ОТСКОКА
В этой анимации мы собираемся установить некоторые ключевые кадры для кнопки, чтобы у нас был эффект отскока, когда пользователь зависает на нем. Это всегда отличный способ привлечь внимание пользователя.
CSS
Во-первых, нам нужно создать ключевые кадры:
Код @keyframes bounce {
0%, 20%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
Затем мы просто применяем анимацию при наведении:
Код button:hover {
animation: bounce 1s;
}
Демонстрация
6. СКОС
Skew определенно является одним из самых своеобразных преобразований в CSS3. У нас это было в Photoshop много лет, но попасть в CSS3 было неожиданностью, если не сказать больше.
CSS
Тем не менее, это интересный переход, и использование его невероятно просто.
Просто установите его на зависание:
Код button:hover {
transform: skew(-9deg);
}
Демонстрация
7. ПУНКТИРНАЯ ГРАНИЦА
Этот эффект очень похож на эффект кнопки призрака, но вместо равномерной границы мы получаем пунктирную линию.
CSS
Все, что нам действительно нужно сделать, это добавить границу к кнопке и инвертировать ее цвета:
Код button {
border: 3px solid #3a7999;
}
button:hover {
border: 3px dotted #2e6f90;
color: #2d6c8c;
background: rgba(10, 10, 10, 0);
}
Демонстрация
8. ОТРАЗИТЬ 3D-ЭФФЕКТ
Этот последний эффект немного сложнее, так как он включает переключение кнопки, чтобы показать другое сообщение, которое мы добавили после псевдоэлемента кнопки.
CSS
Начнем с установки стиля преобразования кнопки для сохранения-3d, чтобы все дочерние элементы элемента сохранили свою трехмерную позицию:
Код button {
transform-style: preserve-3d;
}
После этого нам нужно позаботиться о нашем после псевдоэлемента:
Код button:after {
top: -100%;
left: 0px;
width: 100%;
padding: 10px 0;
position: absolute;
background: #32a23b;
border-radius: 5px;
content: 'ZORNET.RU';
transform-origin: left bottom;
transform: rotateX(90deg);
border: 0px solid #dbdbdc;
}
Добавлен вверх элемента, перед нашей кнопкой и я также установил ширину и радиус границы, чтобы соответствовать нашей кнопке. Что касается свойств преобразования, то здесь установлен нижний левый угол элемента как точку начала и установил его вращение на 90 градусов, чтобы он выглядел плоским.
Теперь все, что осталось сделать, это создать анимацию зависания:
Код button:hover {
transform-origin: center bottom;
transform: rotateX(-90deg) translateY(100%);
}
Как можете видеть, чтобы активировать эффект, здесь установлена точку начала координат в центре, а также повернут элемент, чтобы применить преобразование.
Демонстрация
| | Страна: (RU) |
| |
