• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты HTML для сайта » Пульсирующая кнопка с контактами на CSS (Красивая анимация пульсирующей кнопки на чистом CSS)
Пульсирующая кнопка с контактами на CSS
Kosten
Дата: Понедельник, 2020-04-13, 08:50 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29147
Награды: 62


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



HTML

Код
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <div>
        <input type="checkbox">
        <button><i class="fa fa-phone"></i></button>
        <ul>
            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
            <li><a href="#"><i class="fa fa-youtube"></i></a></li>
            <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        </ul>
    </div>
</body>

</html>

CSS

Код
  html,
        body {
            height: 100%;
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
            overflow: hidden;
        }

        body {
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            -ms-align-items: center;
            align-items: center;
            justify-content: center;
        }

        div {
            display: inline-block;
            position: relative;
            transform: scale(1.3)
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        button {
            position: relative;
            z-index: 1;
            outline: 0;
        }

        button,
        ul li a i.fa {
            background: rgba(0, 0, 0, 0.1);
            display: inline-block;
            color: #000;
            text-align: center;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            line-height: 50px;
        }

        ul li a i.fa {
            height: 37px;
            width: 37px;
            line-height: 37px;
        }

        ul li {
            display: inline-block;
            position: absolute;
            top: 0;
            opacity: 0;
            transform: translate(0 0);
            left: 0;
            transition: .5s
        }

        input {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            height: 100%;
            z-index: 2;
            opacity: 0;
            border-radius: 50%;
        }

        input:checked~ul li:nth-child(1) {
            transform: translate(-23px, -67.2px);
        }

        input:checked~ul li:nth-child(2) {
            transform: translate(-72px, -46px);
        }

        input:checked~ul li:nth-child(3) {
            transform: translate(-85px, -50%);
            top: 50%;
        }

        input:checked~ul li:nth-child(4) {
            transform: translate(-73px, 57px);
        }

        input:checked~ul li {
            opacity: 1
        }

        input:checked~ul li:nth-child(5) {
            transform: translate(-23px, 80px);
        }

        button:after,
        button:before {
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 100%;
            z-index: -1;
            animation: falsh 1.5s infinite linear;
        }

        @keyframes falsh {
            from {
                opacity: 1;
                transform: scale(1)
            }
            to {
                opacity: 0;
                transform: scale(2)
            }
        }


Демонстрация
Прикрепления: 3608853.png(59.5 Kb) · 78689789.zip(4.0 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты HTML для сайта » Пульсирующая кнопка с контактами на CSS (Красивая анимация пульсирующей кнопки на чистом CSS)
  • Страница 1 из 1
  • 1
Поиск: