Красивая анимированная кнопка rip Бармен - Форум
Четверг
21.10.2021
21:22
 
X-Files
 
Онлайн радио #radiobells_script_hash
Мини-чат ·

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

  • Страница 1 из 1
  • 1
Форум »  SOFT, Windows, Android » Веб » Красивая анимированная кнопка rip Бармен
Красивая анимированная кнопка rip Бармен
БарменДата: Понедельник, 29.03.2021, 19:26 | Сообщение # 1
Группа: Альянс
Сообщений: 43
Статус:


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

Вставляем туда куда вам нужно:

Код
<link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC&display=swap" rel="stylesheet">
<div class="subscribe-form">
   <a href="#" target="_blank" class="btn btn-large">
      <i>
         <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.9417 9.77143C11.9417 10.3989 11.4788 10.9132 10.8925 10.9132C10.3165 10.9132 9.84339 10.3989 9.84339 9.77143C9.84339 9.144 10.3063 8.62976 10.8925 8.62976C11.4789 8.62976 11.9417 9.144 11.9417 9.77143ZM7.13828 8.62976C6.55194 8.62976 6.08908 9.144 6.08908 9.77143C6.08908 10.3989 6.56227 10.9132 7.13828 10.9132C7.72452 10.9132 8.18738 10.3989 8.18738 9.77143C8.19771 9.144 7.72452 8.62976 7.13828 8.62976ZM18 2.11887V20.5714C15.4087 18.2815 16.2375 19.0395 13.2274 16.2412L13.7726 18.144H2.10849C0.946246 18.144 0 17.1978 0 16.0251V2.11887C0 0.946246 0.946246 0 2.10849 0H15.8913C17.0537 0 18 0.946246 18 2.11887ZM15.0685 11.8697C15.0685 8.55771 13.5874 5.87313 13.5874 5.87313C12.1063 4.76231 10.6971 4.79317 10.6971 4.79317L10.5531 4.95778C12.3017 5.49255 13.1143 6.26403 13.1143 6.26403C10.6709 4.92491 7.8009 4.92469 5.43084 5.96574C5.05018 6.14056 4.82394 6.26403 4.82394 6.26403C4.82394 6.26403 5.67765 5.45146 7.52909 4.9166L7.42628 4.79312C7.42628 4.79312 6.01708 4.76231 4.53593 5.87308C4.53593 5.87308 3.05483 8.55767 3.05483 11.8696C3.05483 11.8696 3.91883 13.3611 6.1919 13.4331C6.1919 13.4331 6.57252 12.9703 6.88104 12.5794C5.57475 12.1885 5.08112 11.3657 5.08112 11.3657C5.23241 11.4715 5.48191 11.6089 5.50284 11.6228C7.2389 12.5951 9.70502 12.9136 11.9212 11.9828C12.2811 11.8492 12.6823 11.6537 13.104 11.376C13.104 11.376 12.5897 12.2194 11.2423 12.6C11.5509 12.9908 11.9212 13.4331 11.9212 13.4331C14.1943 13.3611 15.0685 11.8697 15.0685 11.8697Z" fill="white"></path>
         </svg>
         Присоединиться в discord
      </i>
   </a>
</div>
CSS:

Код
.subscribe-form svg {
    margin-right: 10px;
}

.btn {
    display: inline-block;
    position: relative;
    padding: 3px;
    font-family: 'Alegreya Sans SC', sans-serif;
}

.btn i {
    background-color: rgba(242, 47, 32, 0.5);
    display: inline-block;
    padding: 8px 15px;
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    font-style: normal;
    text-transform: uppercase;
}

.btn.btn-large i {
    padding: 8px 15px;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.btn:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 2px;
    background-color: #fff;
    top: 0;
    left: 0;
    -webkit-transition: 0.35s ease;
    -o-transition: 0.35s ease;
    transition: 0.35s ease;
}

.btn:after {
    content: "";
    position: absolute;
    height: 2px;
    width: 2px;
    background-color: #fff;
    top: 0;
    right: 0;
    -webkit-transition: 0.35s ease 0.1s;
    -o-transition: 0.35s ease 0.1s;
    transition: 0.35s ease 0.1s;
}

.btn i:before {
    content: "";
    content: "";
    position: absolute;
    height: 2px;
    width: 2px;
    background-color: #fff;
    bottom: 0;
    left: 0;
    -webkit-transition: 0.35s ease 0.2s;
    -o-transition: 0.35s ease 0.2s;
    transition: 0.35s ease 0.2s;
}

.btn i:after {
    content: "";
    content: "";
    position: absolute;
    height: 2px;
    width: 2px;
    background-color: #fff;
    bottom: 0;
    right: 0;
    -webkit-transition: 0.35s ease 0.3s;
    -o-transition: 0.35s ease 0.3s;
    transition: 0.35s ease 0.3s;
}

.btn:hover {
    text-decoration: none;
}

.btn:hover:before {
    width: 80%;
    background-color: #f22f20;
}

.btn:hover:after {
    height: 80%;
    background-color: #f22f20;
}

.btn:hover i {
    background-color: rgba(242, 47, 32, 0.8);
}

.btn:hover i:before {
    height: 80%;
    background-color: #f22f20;
}

.btn:hover i:after {
    width: 80%;
    background-color: #f22f20;
}

.btn.btn-icon i svg {
    fill: #fff;
    margin-right: 5px;
    vertical-align: middle;
}

.btn.btn-icon.btn-icon--star svg {
    width: 15px;
    height: 15px;
}
 
Форум »  SOFT, Windows, Android » Веб » Красивая анимированная кнопка rip Бармен
  • Страница 1 из 1
  • 1
Поиск:


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