Создавайте анимированные кнопки с помощью CSS3

У того, кто управляет веб-сайтом / блогом, часто возникает необходимость создавать настраиваемые кнопки для своего бизнеса. Эти кнопки могут быть созданы с помощью изображений, но и также только с помощью HTML и CSS.
С появлением CSS3 мы можем сделать эти кнопки анимированными и взаимодействовать с движением курсора, изменяя их внешний вид при перемещении по нему с помощью мыши.

Анимированные кнопки с помощью CSS3

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

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

Эти кнопки можно использовать на всех платформах, которые поддерживают CSS3. Я объясню более подробно, как поступить тем, у кого есть блог на платформе Blogger.

 

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

 

Общий код для отображения этих кнопок в сообщении или веб-странице выглядит следующим образом:


<style>/* Bottoni Download e Demo */#contenitore {     margin: 12px auto;     text-align: center;}#contenitore br {     display: none;}.slide1, .slide_2 {     position: relative;     display: inline-block;     height: 50px;     width: 200px;     line-height: 50px;     padding: 0;     border-radius: 50px;     background: #fdfdfd;     border: 2px solid #0099cc;     margin: 10px;     transition: .5s/* Durata animazione */}.slide_2 {     border: 2px solid #efa666;}.slide1:hover {     background-color: #0099cc;}.slide_2:hover {     background-color: #efa666;}.slide1:hover span.cerchio, .slide_2:hover span.cerchio_2 {     left: 100%;     margin-left: -45px;     background-color: #fdfdfd;     color: #0099cc;}.slide_2:hover span.cerchio_2 {     color: #efa666;}.slide1:hover span.title, .slide_2:hover span.title2 {     left: 40px;     opacity: 0;}.slide1:hover span.title-hover, .slide_2:hover span.title-hover2 {     opacity: 1;     left: 40px;}.slide1 span.cerchio, .slide_2 span.cerchio_2 {     display: block;     background-color: #0099cc;     color: #fff;     position: absolute;     float: left;     margin: 5px;     line-height: 42px;     height: 40px;     width: 40px;     top: 0;     left: 0;     transition: .5s;     border-radius: 50%;}.slide_2 span.cerchio_2 {     background-color: #efa666;}.slide1 span.title,   .slide1 span.title-hover, .slide_2 span.title2,   .slide_2 span.title-hover2 {     position: absolute;     left: 90px;     text-align: center;     margin: 0 auto;     font-size: 16px;     font-weight: bold;     color: #30abd5;     transition: .5s;}.slide_2 span.title2,   .slide_2 span.title-hover2 {     color: #efa666;     left: 80px;}.slide1 span.title-hover, .slide_2 span.title-hover2 {     left: 80px;     opacity: 0;}.slide1 span.title-hover, .slide_2 span.title-hover2 {     color: #fff;}</style><div id=»contenitore»><a href=»#» title=»Nome del link» class=»slide1″ target=»_blank»><span class=»cerchio»></span><span class=»title»>Demo</span><span class=»title-hover»>Clicca qui</span></a><a href=»#»  title=»Nome del link» class=»slide_2″ target=»_blank»><span class=»cerchio_2″></span><span class=»title2″>Download</span><span class=»title-hover2″>Clicca qui</span></a></div>

 

См. также:  Как сделать статическую страницу домашней в Blogger.

Посмотрите видео, как правильно установить и настроить код

Хитрость заключается в том, чтобы инвертировать цвет фона кнопки цветом маленького круга,который посредством преобразования перемещается слева направо.
На кнопках будут отображаться слова Demo и Download, которые изменятся на Click here при наведении на них курсора. Этот текст можно заменить другим, производя изменения во второй части кода.

Две кнопки также могут быть вставлены отдельно . Например, если вы хотите показать только  Download, вы должны удалить выделенный зеленый код, который является кнопкой Demo.


Кнопки, независимо от того, добавляются они по отдельности или попарно, всегда будут располагаться в центре макета. Значение 12px в первых строках кода задает расстояние кнопок с содержимым, которое находится над и под ними. Цвет фона является одинаковым для обоих фона: #fdfdfd; в то время как основные цвета #0099cc; и #efa666; которые, конечно, могут быть заменены другими в соответствии с цветами сайта.

 

Те, кто нажмет на кнопку, будут отправлены на связанную страницу, URL которой нужно заменить #в теге href = «#. Он также добавляет название ссылки, которое будет отображаться на кнопке, когда она сдвигается при наведении курсором. Target tag = «_ blank» используется для открытия ссылки в другой вкладке браузера.

Пользователи Blogger могут не вставлять весь этот код в сообщения, в которых отображаются кнопки. После сохранения шаблона перейдите в « Тема» -> «Изменить HTML», найдите строку ]]></b:skin> и сразу над ней вставьте выделенный желтый код, затем сохраните тему.

Чтобы отобразить одну или обе кнопки , вставьте две выделенные фиолетовые строки в HTML и внутри них выделенный зеленый код для кнопки « Демо» и / или выделенный коричневый код для кнопки « Загрузить». Вы можете сделать это даже после того, как создали сообщение или страницу для размещения в Интернете.

См. также:  Изображение во всплывающем окне с эффектом лайтбокса в Blogger.

В заключение я напомню, что также можно откалибровать продолжительность анимации . В коде это установлено как переход: .5s ; то есть полсекунды, но это можно сделать быстрее или медленнее .

 

Ознакомьтесь также

Как изменить расширение копирования имени для файлов и папок в Windows 11/10

В Windows 11 метод вырезания, копирования, вставки, переименования, удаления, совместного использования файлов и папок остается …

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

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