• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Пульсирующая кнопка с контактами на CSS (Красивая анимация пульсирующей кнопки на чистом CSS)
Пульсирующая кнопка с контактами на CSS
Kosten
Понедельник, 13 Апреля 2020 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Красивая анимация на кнопку, которая по умолчанию пульсирует, где по центру выставлен значок телефонной трубки. Но только стоит вам нажать, так появляются вокруг нее еще несколько круглых кнопов, где уже представлены социальные знаки.



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 (Красивая анимация пульсирующей кнопки на чистом CSS)
  • Страница 1 из 1
  • 1
Поиск: