| Kosten | Пятница, 02 Февраля 2018, 09:47 | Сообщение 1 |
| Сейчас в сети интернет можно найти любую кнопку на анимации, что происходит при наведении. Здесь мы подробно разберем, как вам можно сделать свою, где будет при наведении с правой стороны появляться штора под заданным оттенком. Здесь вы можете оставить с углами, что по умолчанию идет, но также их закруглить. Смотря на каком фоне она будет, это если темный шаблон, то можно добавить небольшие тени, но также аналогично идет на светлую стилистику.
Вообще начнем:
Для начала вам понадобится кнопка или элемент навигации. В этом случае мы создадим кнопку ссылки с классом под названием «кнопка» на ней, но можем назвать этот класс тем, что вам бы хотелось.
Код <a class="zornetru_gdsam" href="http://zornet.ru">ZORNET.RU</a>
После того, как у вас установлена ваша кнопка, пришло время настроить CSS. Мы будем использовать две вещи для создания основы для эффекта, линейного градиента и перехода, а затем мы будем подключать положение фона, чтобы достичь слайда, которые мы ищем.
Поэтому, чтобы начать, вы захотите создать свой новый класс и дать ему некоторый базовый стиль. Вы можете использовать наш базовый код кнопки ниже или создать свой.
Код .zornetru_gdsam {
width: 198px;
height: auto;
overflow: hidden;
display: block;
text-align: center;
padding: 9px 0;
margin: 0 auto;
text-decoration: none;
font-size: 15px;
font-family: "Source Sans Pro", sans-serif;
border: 2px solid #155977;
color: #0c3846;
Теперь, когда у нас есть кнопка на месте, пришло время создать два разных цвета фона, начальный цвет и цвет, который будет отображаться при наведении. Для этого мы будем использовать «background-image» 'linear-gradient, где каждому цвету будет присвоен 50% градиента.
Затем мы установим размер фона на 198%, чтобы каждый цвет фактически занимал 100% ширины нашей кнопки. Наконец, мы собираемся установить фоновое положение, чтобы фон начинался с левой стороны, гарантируя, что белая часть нашего градиента заполнит всю кнопку.
Код .zornetru_gdsam {
width: 198px;
height: auto;
overflow: hidden;
display: block;
text-align: center;
padding: 9px 0;
margin: 0 auto;
text-decoration: none;
font-size: 15px;
font-family: "Source Sans Pro", sans-serif;
border: 2px solid #155977;
color: #0c3846;
background-image: linear-gradient(to right, #f5f0f0 50%, #113050 50%);
background-size: 199.9% 100%;
background-repeat: no-repeat;
background-position: bottom left;
Если бы вы предварительно просматривали свою кнопку, как сейчас, она выглядела бы как простая белая кнопка с черной рамкой и черным текстом, поэтому теперь пришло время добавить переходы на основе зависания нашей кнопки. Для этого нам нужно добавить правила перехода к классу, но нам также необходимо создать псевдокласс класса «кнопка: наведите» и добавить к нему правила перехода.
Код .zornetru_gdsam {
width: 198px;
height: auto;
overflow: hidden;
display: block;
text-align: center;
padding: 9px 0;
margin: 0 auto;
text-decoration: none;
font-size: 15px;
font-family: "Source Sans Pro", sans-serif;
border: 2px solid #155977;
color: #0c3846;
background-image: linear-gradient(to right, #f5f0f0 50%, #113050 50%);
background-size: 199.9% 100%;
background-repeat: no-repeat;
background-position: bottom left;
-webkit-transition: all 0.25s cubic-bezier(0.42, 0, 0.82, 1);
-moz-transition: all 0.25s ease-in;
transition: all 0.25s cubic-bezier(0.42, 0, 0.84, 0.99);
}
Теперь, когда кнопка настроена и готова к переходам, а псевдокласс класса hover также настроен на переходы, все, что нужно сделать, это добавить правила для конечного состояния в псевдо класс наведения. В этом примере мы хотим изменить цвет шрифта с черного на исходное состояние до белого, чтобы текст по-прежнему отображался на черном фоне после перехода.
Мы также хотим, чтобы наши фоновые изменения были черными от белого, чего мы достигнем, это оживив фоновое положение от нижнего левого, до нижнего правого.
Код .zornetru_gdsam {
width: 198px;
height: auto;
overflow: hidden;
display: block;
text-align: center;
padding: 9px 0;
margin: 0 auto;
text-decoration: none;
font-size: 15px;
font-family: "Source Sans Pro", sans-serif;
border: 2px solid #155977;
color: #0c3846;
background-image: linear-gradient(to right, #f5f0f0 50%, #113050 50%);
background-size: 199.9% 100%;
background-repeat: no-repeat;
background-position: bottom left;
-webkit-transition: all 0.25s cubic-bezier(0.42, 0, 0.82, 1);
-moz-transition: all 0.25s ease-in;
transition: all 0.25s cubic-bezier(0.42, 0, 0.84, 0.99);
}
.zornetru_gdsam:hover {
-webkit-transition: all 0.25s cubic-bezier(0.42, 0, 0.77, 1.01);
-moz-transition: all 0.25s ease-in;
transition: all 0.25s cubic-bezier(0.42, 0, 0.84, 0.99);
background-position: bottom right;
color: #f3eded;
}
Итак, если вы следовали всем инструкциям, у вас должен быть простой элемент кнопки ссылки, который использует линейный градиент для создания чистого перехода CSS с белого фона на черный фон.
Демонстрация:
| | Страна: (RU) |
| |
