• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать мигающую кнопку на HTML + CSS (Создание каркаса для анимированной кнопки с миганием)
Как сделать мигающую кнопку на HTML + CSS
Kosten
Дата: Среда, 2019-02-13, 04:08 | Сообщение 1
Администраторы
Сообщений:24253
Награды: 56


Многие веб разработчики на сайте ставят мигающею кнопку для как можно большого привлечение внимание. И вот вашему вниманию один вариант одного дизайна под кнопку, которая красиво переливается заданными оттенками, где в самом начале поставлена шрифтовая иконка.

Где можно уже по самой фигуре определить тематический характер. Здесь при наведение не чего не будет меняться, ее работа это мигать, где скорость задается в прикрепленных стилях CSS.



Если не подключили шрифтовые кнопки, то прописываем в низ сайта стиль, чтоб работала на всем сайте, а также на заданной странице в HEAD, это в том случай, если вы ставите эту кнопку на отдельную страницу.

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

Код
<a href="Ссылка на переход" id="pogunidanes-vinongenemas"><span><i class="fa fa-diamond"></i></span>Ключевое слово</a>

CSS

Код
@-webkit-keyframes rainbow {
    0% {background: #91b710;}
    50% {background: #141415}
    100% {background: #91b710;}
}

@keyframes rainbow {
    0% {background: #91b710;}
    50% {background: #141415}
    100% {background: #91b710;}
}

#pogunidanes-vinongenemas {
    background: #a58b09;
    line-height: 65px;
    display: block;
    height: 65px;
    width: 423px;
    padding-right: 18px;
    font-size: 28px;
    color: #f1eeee;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px auto;
    webkit-animation: rainbow 2s linear 2s infinite;
    animation: rainbow 2s linear 2s infinite;
}

@-webkit-keyframes rainbow1 {
    0% {background: #141415;}
    50% {background: #91b710}
    100% {background: #141415;}
}

@keyframes rainbow1 {
    0% {background: #141415;}
    50% {background: #91b710;}
    100% {background: #141415;}
}

#pogunidanes-vinongenemas span {
    background: #0e1942;
    display: block;
    float: left;
    margin-right: 15px;
    text-align: center;
    height: 65px;
    width: 68px;
    webkit-animation: rainbow1 2s linear 2s infinite;
    animation: rainbow1 2s linear 2s infinite;
}

#pogunidanes-vinongenemas img {
    vertical-align: middle;
    margin-top: 10px;
}

Кнопка с элементом мигание на чистом CSS делается очень просто.

Демонстрация
Прикрепления: 5769840.png(6.1 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать мигающую кнопку на HTML + CSS (Создание каркаса для анимированной кнопки с миганием)
  • Страница 1 из 1
  • 1
Поиск: