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

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

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

Рипал:
 Бармен
Ссылка на скачивание! (хоть данный JS есть в коде, но для безопасности скачайте его к себе на сайт)
Вставляем в верхнею или нижнею часть сайта:

Код
<script data-n-head="ssr" src="https://kit.fontawesome.com/5be587bc0a.js" crossorigin="anonymous"></script>

<div class="buttons relative z-50 flex flex-wrap items-center justify-center mt-10 px-5 gap-2" style="transform: translate(0px, 0px); opacity: 1; visibility: inherit;">
   <button class="btn my-1 btn--primary"><span class="btn-text"><i class="fas fa-caret-right mr-3" aria-hidden="true"></i>Play trailer</span></button><a href="#" target="_blank" class="btn my-1 btn--primary"><span class="btn-text">Wishlist</span></a>
</div>
CSS:

Код
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');

*,:after,:before {
   box-sizing: border-box;
   border: 0 solid #e5e7eb;
}

.gap-2 {
   gap: .5rem;
}

.z-50 {
   z-index: 50;
}

.relative {
   position: relative;
}

.px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
}

.mt-10 {
   margin-top: 2.5rem;
}

.justify-center {
   justify-content: center;
}

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

.flex-wrap {
   flex-wrap: wrap;
}

.flex {
   display: flex;
}

.gap-2 {
   gap: .5rem;
}

.z-50 {
   z-index: 50;
}

.relative {
   position: relative;
}

.px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
}

.mt-10 {
   margin-top: 2.5rem;
}

.justify-center {
   justify-content: center;
}

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

.flex-wrap {
   flex-wrap: wrap;
}

.flex {
   display: flex;
}

.mr-3 {
   margin-right: .75rem;
}

a,input,label,li,p,span,textarea {
   font-family: 'Jost', sans-serif;
   font-weight: 400;
   font-size: 1rem;
   line-height: 1.8;
}

a {
   color: inherit;
   text-decoration: inherit;
}

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

.btn {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: .75rem 2.5rem .5rem;
   position: relative;
   width: 100%;
   z-index: 10;
}

.btn {
   width: auto;
}

.btn {
   padding-left: 2rem;
   padding-right: 2rem;
}

.btn,
.btn .btn-text {
   transition: .4s cubic-bezier(0, .38, .02, .99);
}

.btn.btn--primary {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
   --tw-bg-opacity: 0.7;
   --tw-border-opacity: 1;
   border-color: rgba(255, 206, 100, var(--tw-border-opacity));
   border-width: 1px;
}

.btn:after,
.btn:before {
   content: "";
   --tw-border-opacity: 1;
   border-color: rgba(255, 255, 255, var(--tw-border-opacity));
   display: block;
   opacity: 0;
   pointer-events: none;
   position: absolute;
   border-width: 1px;
   z-index: -1;
   transform: scale(.9);
   transition: .2s ease-in-out;
}

.btn:focus:after,
.btn:focus:before,
.btn:hover:after,
.btn:hover:before {
   opacity: .2;
   transform: scale(1);
}

.btn:before {
   top: -8px;
   left: -8px;
   width: calc(100% + 16px);
   height: calc(100% + 16px);
}

.btn.btn--primary:hover {
   background-color: rgba(255, 206, 100, var(--tw-bg-opacity));
   --tw-bg-opacity: 1;
}

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

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

.btn .btn-text {
   font-weight: 400;
   font-size: 1rem;
   line-height: 1.8;
   line-height: 1.25;
   position: relative;
   text-align: center;
   text-transform: uppercase;
   letter-spacing: .1em;
   z-index: 10;
}

.btn:after {
   top: -12px;
   left: -12px;
   width: calc(100% + 24px);
   height: calc(100% + 24px);
   transition-delay: .1s;
}
 
Форум »  SOFT, Windows, Android » Веб » Анимированные кнопки rip Бармен
  • Страница 1 из 1
  • 1
Поиск:


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