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


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

В этом пошаговом уроке мы вместе с тобой научимся находить класс кнопки и подставлять его в html код
Код 1:
<style>

.t142__submit:hover {
animation: bounce 1s;
}
@keyframes bounce {
0%, 20%, 60%, 100% {
transform: translateY(0);
transform: translateY(0);
}

40% {
transform: translateY(-20px);
transform: translateY(-20px);
}

80% {
transform: translateY(-10px);
transform: translateY(-10px);
}
}
</style>
Данный код написан для кнопки из блока BF101.

Первая строка после <style>

.t142__submit:hover - где t142__submit класс кнопки из блока BF101.


Но я тебя научу искать класс понравившейся кнопки и подставлять его в код.
Далее добавь блок с кнопкой:
Форма и кнопка (выбери блок с кнопкой, которая тебе понравилась)
После блока с кнопкой добавь блок: Другое - HTML (T123).
Скопируй код выше, перейди в контент блока "html" и вставь его в строку.
1.
2.
Например мне понравился блок BF201 с кнопкой.
Для того, чтобы сделать код для этой кнопки, надо найти класс кнопки.
Для этого кликни на фон кнопки правой клавишей мыши и выбери "Просмотреть код"
Примерно сюда =)
class кнопки t-submit
ВАЖНО! точку удалять нельзя!
После класса кнопки не должно быть пробела!
Справа откроется окно с кодом. Синим цветом подсвечен код именно кнопки.
Находим в коде "class= и кликаем 2 раза левой клавишей мыши.
t-submit - и есть класс кнопки, к которой ты будешь применять эффект. КОПИРУЙ ЕГО!
3.
Перейди в блок с кодом HTML и вместо t142__submit подставь класс кнопки, который ты скопировал.
Код 2: Переворот 3D
<style>

.t142__submit {
transform-style: preserve-3d;
transform-origin: center bottom;
transition: all 800ms ease;
}

.t142__submit:after {
top: -100%;
left: 0px;
width: 100%;
color: #ffd630;
padding: 10px 0;
position: absolute;
background: #000000;
border-radius: 5px;
content: 'Show code';
transform-origin: left bottom;
transform: rotateX(90deg);
line-height: 2.4;
height: 40px;
}

.t142__submit:hover {
transform: rotateX(-90deg) translateY(100%);
}

</style>
Задание:

Добавь блок с кнопкой BF101 (раздел форма и кнопка).
Ниже добавь блок с кодом html.
Скопируй этот код и вставь в контент блока с HTML.
После публикации страницы можно просмотреть эффект.
Ты так же можешь скопировать код любого цвета и добавить его в строку color.

А в строку content вместо Show code вписать свою фразу обратной стороны кнопки.
Show more
Код 3: Wobble Skew
<style>
.t142__submit:hover {
webkit-animation-name: wobble-skew;
animation-name: wobble-skew;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
@keyframes wobble-skew {
16.65% {
-webkit-transform: skew(-12deg);
transform: skew(-12deg);
}
33.3% {
-webkit-transform: skew(10deg);
transform: skew(10deg);
}
49.95% {
-webkit-transform: skew(-6deg);
transform: skew(-6deg);
}
66.6% {
-webkit-transform: skew(4deg);
transform: skew(4deg);
}
83.25% {
-webkit-transform: skew(-2deg);
transform: skew(-2deg);
}
100% {
-webkit-transform: skew(0);
transform: skew(0);
}
}
</style>
Задание:

Добавь блок с кнопкой BF101 (раздел форма и кнопка).
Ниже добавь блок с кодом html.
Скопируй этот код и вставь в контент блока с HTML.
После публикации страницы можно просмотреть эффект.
Код 4: Border Trim
<style>

.t142__submit{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
position: relative;
}

.t142__submit:before {
content: '';
position: absolute;
border: white solid 4px;
border-radius: 5px;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
opacity: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: opacity;
transition-property: opacity;
}.t142__submit:hover:before {
opacity: 1;
}

</style>
Задание:

Добавь блок: Обложка - CR12 (Обложка с 1 или 2 кнопками).
Ниже добавь блок с HTML. Скопируй этот код и вставь в контент.
Далее нажми на фон кнопки с обложки правой клавишей мыши, найди class кнопки. Копируй и подставь его вместо t142__submit
Обрати внимание, что class кнопки в блоке указан с пробелом, поэтому в коде должен присутствовать ОДИН пробел.
We're proud to design great products for life
We develop useful and attractive projects. We create services that help people run their businesses and improve their management systems.
Код 5: Border Outline Outward
<style>.t142__submit {
box-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
position: relative;
}.t142__submit:before {
content: '';
position: absolute;
border: #ffd630 solid 4px;
border-radius: 5px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: top, right, bottom, left;
transition-property: top, right, bottom, left;
}.t142__submit:hover:before {
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
}
</style>
Задание:

Добавь блок с кнопкой BF102.
Ниже добавь блок с HTML.
Скопируй код эффекта и вставь в контент блока с HTML
Замени к коде class кнопки из блока BF102.
Так как код написан для блока BF101, то в коде ничего не меняем!
Код 6: Float Shadow
<style>
.t142__submit {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

.t142__submit:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}

.t142__submit:hover {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}

.t142__submit:hover:before {
opacity: 1;
-webkit-transform: translateY(5px);
transform: translateY(5px);
}

</style>
LET'S GO!
Made on
Tilda