У того, кто управляет веб-сайтом / блогом, часто возникает необходимость создавать настраиваемые кнопки для своего бизнеса. Эти кнопки могут быть созданы с помощью изображений, но и также только с помощью 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>
Посмотрите видео, как правильно установить и настроить код
Хитрость заключается в том, чтобы инвертировать цвет фона кнопки цветом маленького круга,который посредством преобразования перемещается слева направо.
На кнопках будут отображаться слова Demo и Download, которые изменятся на Click here при наведении на них курсора. Этот текст можно заменить другим, производя изменения во второй части кода.
Две кнопки также могут быть вставлены отдельно . Например, если вы хотите показать только Download, вы должны удалить выделенный зеленый код, который является кнопкой Demo.
Кнопки, независимо от того, добавляются они по отдельности или попарно, всегда будут располагаться в центре макета. Значение 12px в первых строках кода задает расстояние кнопок с содержимым, которое находится над и под ними. Цвет фона является одинаковым для обоих фона: #fdfdfd; в то время как основные цвета #0099cc; и #efa666; которые, конечно, могут быть заменены другими в соответствии с цветами сайта.
Те, кто нажмет на кнопку, будут отправлены на связанную страницу, URL которой нужно заменить #в теге href = «#. Он также добавляет название ссылки, которое будет отображаться на кнопке, когда она сдвигается при наведении курсором. Target tag = «_ blank» используется для открытия ссылки в другой вкладке браузера.
Пользователи Blogger могут не вставлять весь этот код в сообщения, в которых отображаются кнопки. После сохранения шаблона перейдите в « Тема» -> «Изменить HTML», найдите строку ]]></b:skin> и сразу над ней вставьте выделенный желтый код, затем сохраните тему.
Чтобы отобразить одну или обе кнопки , вставьте две выделенные фиолетовые строки в HTML и внутри них выделенный зеленый код для кнопки « Демо» и / или выделенный коричневый код для кнопки « Загрузить». Вы можете сделать это даже после того, как создали сообщение или страницу для размещения в Интернете.
В заключение я напомню, что также можно откалибровать продолжительность анимации . В коде это установлено как переход: .5s ; то есть полсекунды, но это можно сделать быстрее или медленнее .
