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