Анимированные кнопки под гаджеты rip Бармен - Форум
Воскресенье
19.09.2021
08:53
 
X-Files
 
Онлайн радио #radiobells_script_hash
Мини-чат ·

Для добавления сообщения зарегистрируйтесь.
Регистрация Вход . Новые сообщения · Участники · Правила форума · RSS

  • Страница 1 из 1
  • 1
Форум »  SOFT, Windows, Android » Веб » Анимированные кнопки под гаджеты rip Бармен
Анимированные кнопки под гаджеты rip Бармен
БарменДата: Вторник, 24.08.2021, 20:41 | Сообщение # 1
Группа: Альянс
Сообщений: 43
Статус:


Рипал: Бармен

Вставляем в верхнею или нижнею часть сайта:

Код
<div class="available-platforms">
   <a target="_blank" href="#" class="platform hero-platform">
      <div class="platform-icon">
         <svg width="65" height="65" viewBox="0 0 65.875 65.813">
            <path d="M16.487 13.558a6.191 6.191 0 106.216 6.3 6.1 6.1 0 00-6.216-6.3zM30.843.009q-6.757.007-13.51 0a16.51 16.51 0 00-7.306 1.51c-6.227 3-9.766 8-9.9 14.9C-.082 27.427.061 38.442.085 49.453a15.279 15.279 0 00.367 2.991 16.274 16.274 0 004.812 8.666 16.892 16.892 0 0012.045 4.708h13.576c.83 0 .916-.084.916-.916V1c.005-.959-.027-.991-.958-.991zm-4.409 60.439c-.207.016-.387.036-.567.036-2.873 0-5.743.012-8.616 0a11.528 11.528 0 01-8.107-3.064 10.984 10.984 0 01-3.723-8.192c-.052-10.844-.023-21.689-.02-32.53a11.556 11.556 0 019.254-11.094 16.466 16.466 0 012.759-.249c2.767-.031 5.535-.012 8.3-.012h.718v55.105zm39.436-43.1a20.59 20.59 0 00-.354-3.735A16.8 16.8 0 0049.24.022c-3.3-.052-6.607-.011-9.912-.011-.938 0-.951.014-.951.926v63.757c0 1.118 0 1.118 1.09 1.118 3.183 0 6.362.016 9.545-.008a16.91 16.91 0 0016.872-17.045q.006-15.699-.014-31.408zM50.988 42.804a6.618 6.618 0 01.478-13.223 6.618 6.618 0 11-.478 13.226z" fill="currentColor" fill-rule="evenodd"></path>
         </svg>
      </div>
      <p class="sr-only">Nintendo Switch</p>
   </a>
   <a target="_blank" href="#" class="platform hero-platform">
      <div class="platform-icon">
         <svg width="60" height="74" viewBox="0 0 60.344 74.031">
            <path d="M41.099 11.832A15.809 15.809 0 0044.926-.003 15.846 15.846 0 0033.298 6.44c-4.325 5.7-3.224 10.578-3.224 10.578s5.865 1.015 11.025-5.186zm9.28 27.4a16.078 16.078 0 018.007-14.028s-4.094-7.4-14.5-7.4c-6.046 0-10.691 3.44-13.193 3.44-2.915 0-7.267-3.233-12.875-3.233-8.626 0-17.822 7.723-17.822 22.446 0 14.965 10.865 33.581 19.465 33.581 3 0 7.611-3.023 12.256-3.023 4.558 0 7.92 2.915 12.246 2.915 9.418 0 16.391-19.626 16.391-19.626s-9.975-3.865-9.975-15.071z" fill="currentColor" fill-rule="evenodd"></path>
         </svg>
      </div>
      <p class="sr-only">IOS</p>
   </a>
   <a target="_blank" href="#" class="platform hero-platform">
      <div class="platform-icon">
         <svg width="63" height="75" viewBox="0 0 63.094 75.906">
            <path d="M10.966 40.362h.039v17.774a2.461 2.461 0 002.461 2.46h5.257v10.936a4.378 4.378 0 008.756 0V60.595h8.141v10.937a4.379 4.379 0 008.757 0V60.595h5.257a2.46 2.46 0 002.459-2.46V40.362h.04V23.416H10.966v16.946zm47.739-18.345a4.379 4.379 0 00-4.378 4.378v19.674a4.379 4.379 0 008.757 0V26.394a4.378 4.378 0 00-4.379-4.378zm-54.312 0a4.378 4.378 0 00-4.377 4.378v19.674a4.378 4.378 0 108.756 0V26.394a4.378 4.378 0 00-4.378-4.378zM41.474 5.562L44.997.589a.4.4 0 00-.234-.446.4.4 0 00-.5-.074l-3.636 5.132a27.568 27.568 0 00-18.2-.056l-3.6-5.076a.557.557 0 00-.732.52l3.481 4.912C11.429 9.986 11.131 20.99 11.131 20.99h40.825s-.41-10.903-10.482-15.428zm-18.88 8.994a2.458 2.458 0 112.458-2.457 2.457 2.457 0 01-2.458 2.457zm17.919 0a2.458 2.458 0 112.457-2.457 2.457 2.457 0 01-2.461 2.457z" fill="currentColor" fill-rule="evenodd"></path>
         </svg>
      </div>
      <p class="sr-only">Android</p>
   </a>
   <div class="text-center flex flex-col items-center">
      <button class="btn btn--round">
         <span class="btn-text">
            <svg viewBox="0 0 53 54" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" class="btn-icon icon">
               <path d="M30.775 7.348L35.087.484c.188-.299.518-.482.871-.482a1.027 1.027 0 01.871 1.576l-4.218 6.714c.065.051.127.103.186.156 1.02.733 1.777 1.636 2.172 2.64 3.83.14 7.817.406 9.699.91a9.4 9.4 0 016.631 6.629c1.035 3.863 1.065 10.966 1.065 11.763 0 .797-.03 7.898-1.065 11.76a9.403 9.403 0 01-6.629 6.629c-.467.125-1.063.236-1.755.333v.005c.419 1.326.902 3.546-.362 4.02-1.204.452-4.169-1.87-6.055-3.51l-.017.001c-4.37.2-8.92.216-10.295.216-1.377 0-5.938-.016-10.313-.216-1.886 1.639-4.851 3.961-6.054 3.509-1.264-.475-.78-2.698-.36-4.024a15.353 15.353 0 01-1.752-.333 9.403 9.403 0 01-6.631-6.628C.041 38.29.011 31.188.011 30.39s.03-7.9 1.064-11.761a9.404 9.404 0 016.624-6.628c1.889-.506 5.894-.772 9.733-.911.409-1.041 1.208-1.974 2.285-2.722l.057-.046-4.237-6.744A1.027 1.027 0 1117.279.484l4.322 6.88.026-.009c1.344-.534 2.907-.84 4.575-.84 1.633 0 3.164.293 4.488.806l.085.027zm-4.589 7.357s14.013 0 17.508.936a5.619 5.619 0 013.962 3.962c.937 3.495.937 10.787.937 10.787s0 7.291-.937 10.786a5.619 5.619 0 01-3.962 3.961c-3.494.937-17.508.937-17.508.937s-14.013 0-17.508-.937a5.617 5.617 0 01-3.962-3.961c-.941-3.495-.941-10.786-.941-10.786s0-7.292.936-10.787a5.619 5.619 0 013.964-3.959c3.495-.936 17.508-.936 17.508-.936l.003-.003zm15.12 8.089a3.959 3.959 0 00-2.79-2.79c-2.461-.66-12.33-.66-12.33-.66s-9.868 0-12.33.659a3.959 3.959 0 00-2.79 2.79 44.09 44.09 0 000 15.192 3.959 3.959 0 002.79 2.79c2.461.659 12.33.659 12.33.659s9.868 0 12.329-.659a3.959 3.959 0 002.79-2.79 44.09 44.09 0 000-15.192l.001.001zM23.03 35.123v-9.467l8.2 4.734-8.2 4.733z" fill="#2d7090"></path>
            </svg>
         </span>
         <span class="sr-only">Trailer</span>
      </button>
   </div>
</div>
CSS:

Код
*,
::after,
::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
}

[role=button],
button {
    cursor: pointer;
}

.available-platforms {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.platform {
    margin: 0.25rem;
    display: block;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    filter: drop-shadow(0 0 5px #2e7090);
    transition: background .5s ease-in-out, color .5s ease-in-out;
}

.platform {
    margin: 0.75rem;
}

.platform:hover {
    -webkit-animation: pulse 1s forwards;
    animation: pulse 1s forwards;
}

.platform:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(69, 184, 244, var(--tw-bg-opacity));
}

.platform .platform-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    --tw-text-opacity: 1;
    color: rgba(46, 112, 144, var(--tw-text-opacity));
    width: 70px;
    height: 70px;
}

.platform .platform-icon {
    width: 100px;
    height: 100px;
}

.platform .platform-icon {
    padding: 1.75rem;
}

.platform:hover .platform-icon {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.text-center {
    text-align: center;
}

.items-center {
    align-items: center;
}

.flex-col {
    flex-direction: column;
}

.flex {
    display: flex;
}

.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1rem;
    line-height: 1.8;
    text-transform: uppercase;
    transition: background .5s ease-in-out, color .5s ease-in-out;
}

.btn--round {
    margin: .25rem;
    display: block;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
    padding: 0;
    filter: drop-shadow(0 0 5px #2e7090);
}

.btn:hover {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.btn:hover {
    -webkit-animation: pulse 1s forwards;
    animation: pulse 1s forwards;
}

.btn--round:hover {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.btn--round:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(69, 184, 244, var(--tw-bg-opacity));
}

.btn--round:hover {
    -webkit-animation: pulse 1s forwards;
    animation: pulse 1s forwards;
}

.btn--round {
    margin: .75rem;
}

.btn:hover .btn-text {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.btn .btn-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.btn--round .btn-text {
    --tw-text-opacity: 1;
    color: rgba(46, 112, 144, var(--tw-text-opacity));
}

.btn:hover .btn-text svg path {
    fill: #fff;
}

.btn--round .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    --tw-text-opacity: 1;
    color: rgba(46, 112, 144, var(--tw-text-opacity));
    width: 70px;
    height: 70px;
}

.btn--round .btn-icon {
    width: 100px;
    height: 100px;
}

.btn--round .btn-icon {
    padding: 1.75rem;
}
 
Форум »  SOFT, Windows, Android » Веб » Анимированные кнопки под гаджеты rip Бармен
  • Страница 1 из 1
  • 1
Поиск:


СЕЗОН КАТАСТРОФ © 2021