Оформление
    Цвета дизайна
    Быстрые ссылки
    Гостевая Правила Игромеханика Хронология сюжета Занятые внешности Ждут в игре Вопросы и предложения Отсутствия и уход F.A.Q Поиск соигрока Инструкция к игровым маскам Реклама и баннеры

    MadHat's Test

    Объявление

    RPG TOP FORUM TOP

    Информация о пользователе

    Привет, Гость! Войдите или зарегистрируйтесь.

    Вы здесь » MadHat's Test » все для нового проекта! » выделенная тема

    выделенная тема

    Страница: 1 2  

    Сообщений 1 страница 20 из 23

    1

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    [html]<div class="need">
    <div id="stat"><imp>Ваше короткое обращение, не более 90 символов</imp></div>
    <div id="info">
    <blok>
    <img src="https://forumstatic.ru/files/0015/28/00/15030.png"><span>аниме/манга/игра и т.д англ.</span>
    <span>имя персонажа англ.</span>
    </blok>
    <blok>
    <name>Имя Клан</name>
    <prof><z>Занимаемый слот: </z>Ответ</prof>
    <prof><z>Деревня: </z>Ответ</prof>
    <prof><z>Возраст персонажа: </z>Ответ</prof>
    <owl><z>Кем приходится: </z>Ответ</owl>
    <born><z>Связь с вами: </z> дискорд, вк, тг</born>
    </blok>
    </div>
    <div id="bio">
    <div id="stat"><zagolovok>описание</zagolovok></div>
    <text>Акция рассчитана на поиск соигрока для игры, будь это напарник, родственник и (или) любой другой человек, который связан с Вашим персонажем по биографии. Для действующих игроков это возможность закрыть гештальты или найти себе партнера на игру. Для гостей и новичков — влиться в процесс ролевого геймплея и не рисковать остаться без игры.
    <br>
    ✦ Данная акция имеет строгий шаблон оформления заявки.
    <br>
    ✦ Пришедший на разыскиваемую роль игрок пишет полноценную анкету.
    <br>
    ✦ Акция дает буст к награде на выполнение первых 4 миссий/квестов (т.е. на 2 D и 2 C миссии) в размере +100% ищущему и пришедшему. Если они выполняются совместно.
    <br>
    ✦ Аналог награде можно выбрать 20 ОП, которые получает только пришедший игрок после выполнения 4 миссий/квестов.
    <br>
    ✦ Если на разыскиваемом персонаже уже играли, а после игрок сменился, то он получит награду 20 ОП после выполнения 2 миссий/квестов (минимум C ранга).
    <br>
    ✦ Разыскиваемый персонаж изначально всегда генин с 13.0 статами (если без бонусов).
    <br>
    ✦ Прокачка разыскиваемого персонажа сохраняется при смене игроков (ранг, уровень силы, купленные техники и параметры).
    <br>
    ✦ Сохраняются все наигранные эпизоды, сюжеты и различные баффы (н-р, за повышение звания), дебаффы (н-р, ампутации).
    <br>
    ✦ Игрок, который ищет необходимого персонажа обязан отслеживать статус заявки, а также актуализировать ее.
    <br>
    ✦ Если подавший игрок теряет персонажа или уходит с роли и разыскиваемый персонаж не занят, заявка сносится в архив.
    <br>
    ✦ Разыскиваемые персонажи не расширяют имеющийся набор слотов.
    <br>
    ✦ От одного персонажа может быть максимум 3 заявки на поиск.
    <br>
    </text>
    </div>
    </div>
    [/html]

    Шаблон заявки ВВ-код:

    Код:
    [b]Короткое обращение[/b]: слова будущему соигроку, не более 90 символов. 
[b]Имя / Клан[/b]:
[b]Занимаемый слот[/b]: 
[b]Возраст[/b]: 
[b]Деревня[/b]:
[b]Кем приходится:[/b] брат, сват, товарищ, враг и т.д
[b]Англ. Название аниме / манги, Англ. имя персонажа:[/b]
[b]Не анимированное изображение персонажа:[/b] 190 х 190 пикселей
[b]Связь с вами[/b]: никакого ЛС. Дискорд, ВК, ТГ
[b]Описание:[/b] здесь должна располагаться подробная информация о персонаже: как познакомились [color=maroon][b]большая просьба указывать точные даты событий[/b][/color], что связывает персонажей, а также описание планов на дальнейшую игру. Вы вольны писать здесь все, что считаете нужным. Разрешаются также ссылки на сторонние ресурсы (видео, фото, аудио, прочий вдохновляющий контент).

    Оставляйте заявку прямо в этой теме. Далее администратор оформит ваш пост.

    +1

    2

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    вмвмыыывм
    вммвввым
    фыссыыфс

    https://madnyaska.anihub.me/viewtopic.p … остяпример

    https://madnyaska.anihub.me/viewtopic.php?id=114

    +1

    3

    • Автор: ник гостя
    • Гость

    пример гостя пример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостяпример гостя

    0

    4

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    272777

    0

    5

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    выделенная тема

    0

    6

    • Автор: Бродяга
    • Новичок
    • Личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 3
    • Уважение: +3
    • Последний визит:
      2024-05-06 20:52:39

    Пример цитаты

    Код:
    Пример кода
    Пример спойлера

    ntrcn

    +2

    7

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    --

    0

    8

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    --

    0

    9

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    [html]
    <style>
    @import url(https://code.ionicframework.com/ionicon … ns.min.css);
    .snip1434 {
      font-family: 'Raleway', Arial, sans-serif;
      border: none;
      border-radius: 5px;
      overflow: hidden;
      color: #ffffff;
      cursor: pointer;
      padding: 0px 5px 0px 50px;
      text-align: center;
      display: inline-block;
      margin: 12px 25px;
      font-weight: 600;
      outline: none;
      position: relative;
      font-size: 10px;
      line-height: 35px;
      background-color: #8a1a32;
      letter-spacing: 1px;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    .snip1434 i {
      font-size: 4em;
      width: 55px;
      line-height: 50px;
      position: absolute;
      left: -13px;
      top: 5px;
      -webkit-transform: rotate(-25deg) scale(1);
      transform: rotate(-25deg) scale(1);
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    .snip1434:hover,
    .snip1434.hover {
      color: #ffffff;
      background-color: #ac203f;
    cursor: url(http://s1.iconbird.com/ico/0512/32pxman … misc57.png), pointer;
    }
    .snip1434:hover i,
    .snip1434.hover i {
      -webkit-transform: rotate(-20deg) scale(1.3);
      transform: rotate(-20deg) scale(1.3);
    cursor: url(http://s1.iconbird.com/ico/0512/32pxman … misc57.png), pointer;
    }

    </style>

    <button class="snip1434">Подписаться<i class="ion-settings"></i></button>
    <button class="snip1434">Открыть<i class="ion-clipboard"></i></button>
    <button class="snip1434">Добавить<i class="ion-stats-bars"></i></button>
    <button class="snip1434">Удалить<i class="ion-person-stalker"></i></button>

    [/html]

    0

    10

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    [html]
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
    .star {
      transform-style: preserve-3d;
      width: 1px;
      height: 1px;
      position: absolute;
      color: red;
    }
    .star:before {
      position: absolute;
      content: '\2726';
      color: inherit;
      inset: 0;
      //box-shadow: 0 0 1em .5em #a3c2;
      //filter: drop-shadow(0 0 .5em white);
      text-shadow: 0 0 .8em #fff5;
    }

    </style>
    <script>
    //look at fixes in the Pen https://codepen.io/ghaste/pen/OJqLbvg
    //for adding mouse trail to a page that scrolls beyond the viewport, as would be the case with most websites - lol
    let x1=0, y1=0;
    window.client
    const
      vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0),
      dist_to_draw = 50,
      delay = 1000,
      fsize = [
        '1.1rem', '1.4rem', '.8rem', '1.7rem'
      ],
      colors = [
      '#E23636',
      '#F9F3EE',
      '#E1F8DC',
      '#B8AFE6',
      '#AEE1CD',
      '#5EB0E5'
    ],
      rand = (min, max) =>
        Math.floor(Math.random() * (max - min + 1)) + min,
      selRand = (o) => o[rand(0, o.length -1)],
      distanceTo =  (x1, y1, x2, y2) =>
        Math.sqrt((Math.pow(x2-x1,2))+(Math.pow(y2-y1,2))),
      shouldDraw = (x, y) =>
        (distanceTo(x1, y1, x, y) >= dist_to_draw),
      addStr = (x, y) => {
        const str = document.createElement("div");
        str.innerHTML = '✦';
        str.className = 'star';
        str.style.top = `${y + rand(-20,20)}px`;
        str.style.left = `${x}px`;
        str.style.color = selRand(colors);
        str.style.fontSize = selRand(fsize);
        document.body.appendChild(str);
        //console.log(rand(0, 3));
        const fs = 10 + 5 * parseFloat(getComputedStyle(str).fontSize);
        //console.log(vh, y, fs);
        //console.log((y+fs)>vh?vh-y:fs);
        str.animate({
          translate: `0 ${(y+fs)>vh?vh-y:fs}px`,
          opacity: 0,
          transform: `rotateX(${rand(1, 500)}deg) rotateY(${rand(1, 500)}deg)`
        }, {
          duration: delay,
          fill: 'forwards',

        });
        //could add a animation terminate listener, but why add the additional load
        setTimeout(() => {
            str.remove();
          }, delay);
      }

    addEventListener("mousemove", (e) => {
      const {clientX, clientY} = e;
      if(shouldDraw(clientX, clientY)){
        addStr(clientX, clientY);
        x1 = clientX;
        y1 = clientY;
      }
    });
    </script>
    <h1>Sed ut perspiciatis</h1>
    Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
    [/html]

    0

    11

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    [html]
    <style>

    .gallery {
      position: relative;
      width: 760px;
      height: 305px;

      &:hover :not(div[data-pos='0'],img) { cursor: pointer; }

      & .item {
        position: absolute;
        width: 175px;
        height: 150px;
        overflow: hidden;
        transition: transform 0.9s, width 0.9s, height 0.9s;

        & img {
          width: 100%;
          height: 100%;
        }
      }

      & div[data-pos='0'] {
        width: 400px;
        height: inherit;
        z-index: 10;
      }
    }

    div[data-pos='0'] { transform: translate(0,0); }
    div[data-pos='1'] { transform: translate(405px,0); }
    div[data-pos='2'] { transform: translate(585px,0); }
    div[data-pos='3'] { transform: translate(405px,155px); }
    div[data-pos='4'] { transform: translate(585px,155px); }

    @media (width < 800px) {
      .gallery {
        width: 405px;
        height: 660px;

        & .item {
          width: 200px;
          height: 150px;
        }

        & div[data-pos='0'] {
          width: inherit;
          height: 350px;
          z-index: 10;
        }
      }

      div[data-pos='0'] { transform: translate(0,0); }
      div[data-pos='1'] { transform: translate(0,355px); }
      div[data-pos='2'] { transform: translate(0,510px); }
      div[data-pos='3'] { transform: translate(205px,355px); }
      div[data-pos='4'] { transform: translate(205px,510px); }
    }
    </style>
    <script>
    function init(e) {
      if (!e.target.closest('.item')) return;
      let hero = document.querySelector('div[data-pos="0"]');
      let target = e.target.parentElement;
      [target.dataset.pos,hero.dataset.pos] = [hero.dataset.pos,target.dataset.pos];
    }

    window.addEventListener('click',init,false);
    </script>
    <main class='gallery'>
      <div class='item' data-pos='0'><img src='https://source.unsplash.com/qvEI30ydO_w'></div>
      <div class='item' data-pos='1'><img src='https://source.unsplash.com/9KDuSi7dJv4'></div>
      <div class='item' data-pos='2'><img src='https://source.unsplash.com/d5PYB17O9jE'></div>
      <div class='item' data-pos='3'><img src='https://source.unsplash.com/Um9AkOiIDcU'></div>
      <div class='item' data-pos='4'><img src='https://source.unsplash.com/YTk8tO3PGdA'></div>
    </main>

    [/html]

    0

    12

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    [html]<style>
    .characterscroll ::-webkit-scrollbar {width: 3px; background: transparent; border: none;}
    .characterscroll ::-webkit-scrollbar-thumb {background-color: #1a1a1a; border: none; }

    .a1 {
      border-top: 10px solid #FC4747;
      width: 100%;
    }

    .a2 {
      background-color: #F9F9F9;
      padding: 5px;
      font-family: times;
      font-size: 18px;
      letter-spacing: 2px;
      border-bottom: 1px dotted #BABABA;
      line-height: 9px;
      text-align: center;
    }

    .a3 {
      font-size: 10px;
      line-height: 11px;
      overflow: auto;
      height: 234px;
      text-align: justify;
      color: #6B6B6B;
      padding-right: 5px;
    }

    .a4 {
      background-color: #F9F9F9;
      padding: 5px;
      border-top: 10px solid #FC4747;
      margin-top: 10px;
    }

    .a5 {
      font-family: times;
      font-size: 18px;
      letter-spacing: 2px;
      border-bottom: 1px dotted #BABABA;
      line-height: 9px;
      text-align: center;
    }

    .a6 {
      background-color: #F9F9F9;
      padding: 5px;
      border-top: 10px solid #202020;
    }

    .a7 {
      font-size: 8px;
      letter-spacing: 2px;
      line-height: 9px;
      text-align: justify;
      color: #ACACAC;
    }

    .a8 {
      border: 1px dotted #9A9A9A;
      padding: 5px;
      margin-top: 15px;
    }
    .a8 img{
      width: 120px;
      height: 120px;
    }

    .a9 {
      border: 5px solid #DFDFDF;
      height: 80px;
      width: 80px;
    }

    .a10 {
      font-size: 8px;
      letter-spacing: 2px;
      line-height: 9px;
      text-align: right;
      color: #FC4747;
      margin-top: 6px;
    }

    .a11 {
      font-size: 8px;
      letter-spacing: 2px;
      line-height: 9px;
      text-align: justify;
      color: #ACACAC;
      margin-top: 15px;
      border-top: 1px dotted #BFBFBF;
      padding-top: 5px;
    }

    .a12 {
      font-family: helvetica;
      font-size: 30px;
      letter-spacing: -2px;
      text-align: right;
      margin-top:0px;
      line-height: 24px;
    }

    .a13 {
      color: #FC4747;
      font-weight: 700;
      font-style: italic;
    }

    .a14 {
      border-top: 10px solid #FC4747;
        height: 280px;
    }

    .a15 {
      background-color: #F9F9F9;
      padding: 5px;
      font-family: times;
      font-size: 18px;
      letter-spacing: 2px;
      border-bottom: 1px dotted #BABABA;
      line-height: 9px;
      text-align: center;
    }

    .a16 {
      font-size: 10px;
      line-height: 11px;
      overflow: auto;
      height: 230px;
      text-align: justify;
      color: #6B6B6B;
      padding-right: 5px;
    }

    .a17 {
      background-color: #F9F9F9;
      padding: 5px;
      border-top: 10px solid #FC4747;
      margin-top: 10px;
        height: 270px;
    }

    .a18 {
      font-family: times;
      font-size: 18px;
      letter-spacing: 2px;
      border-bottom: 1px dotted #BABABA;
      line-height: 9px;
      text-align: center;
    }

    .a19 {
      font-size: 10px;
      line-height: 11px;
      overflow: auto;
      height: 230px;
      text-align: justify;
      color: #6B6B6B;
      padding-right: 5px;
    }

    .ac {
      font-family: arial;
      font-size: 8px;
      letter-spacing: 3px;
    }
    </style>

    FRIENDS

                Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus, ei enim offendit usu. Sea mazim verear apeirian in, ea munere ignota repudiandae per, ad sea minim partiendo. Eum autem mollis ex, errem bonorum sapientem no eam, ad vim audire repudiandae. Te eos causae volutpat, sit decore quaeque ne.
                Prima argumentum vis eu, regione noluisse suavitate ius ut. Ex elitr alterum convenire sea, eam ad officiis principes. No tota interesset pro, vero errem necessitatibus id sit, audire definitiones et quo. Mei sonet consulatu ei, in cum augue elitr atomorum. Pri an alia alterum antiopam.
                In nam iusto torquatos, alia nullam iriure mel at, prodesset democritum deseruisse ne ius. Et nam dicat verterem, pro ut justo verear. Ad unum deseruisse eum, eu sed labore vivendo lobortis. An oratio qualisque definitionem vel, cu has mollis singulis, ei mel principes repudiare.

    LOVERS

                Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus, ei enim offendit usu. Sea mazim verear apeirian in, ea munere ignota repudiandae per, ad sea minim partiendo. Eum autem mollis ex, errem bonorum sapientem no eam, ad vim audire repudiandae. Te eos causae volutpat, sit decore quaeque ne.
                Prima argumentum vis eu, regione noluisse suavitate ius ut. Ex elitr alterum convenire sea, eam ad officiis principes. No tota interesset pro, vero errem necessitatibus id sit, audire definitiones et quo. Mei sonet consulatu ei, in cum augue elitr atomorum. Pri an alia alterum antiopam.
                In nam iusto torquatos, alia nullam iriure mel at, prodesset democritum deseruisse ne ius. Et nam dicat verterem, pro ut justo verear. Ad unum deseruisse eum, eu sed labore vivendo lobortis. An oratio qualisque definitionem vel, cu has mollis singulis, ei mel principes repudiare.

            ─ Baby I'm gonna leave you d r o w n i n g until you reach for my hand. Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus.

    https://i.pinimg.com/736x/c2/50/c4/c250c4d5ce298e9603f5d7c5bd03d2a4.jpg

    ─ NICKNAME

    TRAIT
    EXTRA
    OR
    ESSENTIAL
    INFORMATION

    FIRST-
    MIDDLE

    LAST

    ENEMIES

                Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus, ei enim offendit usu. Sea mazim verear apeirian in, ea munere ignota repudiandae per, ad sea minim partiendo. Eum autem mollis ex, errem bonorum sapientem no eam, ad vim audire repudiandae. Te eos causae volutpat, sit decore quaeque ne.
                Prima argumentum vis eu, regione noluisse suavitate ius ut. Ex elitr alterum convenire sea, eam ad officiis principes. No tota interesset pro, vero errem necessitatibus id sit, audire definitiones et quo. Mei sonet consulatu ei, in cum augue elitr atomorum. Pri an alia alterum antiopam.
                In nam iusto torquatos, alia nullam iriure mel at, prodesset democritum deseruisse ne ius. Et nam dicat verterem, pro ut justo verear. Ad unum deseruisse eum, eu sed labore vivendo lobortis. An oratio qualisque definitionem vel, cu has mollis singulis, ei mel principes repudiare.

    OTHERS

                Lorem ipsum dolor sit amet, cu omnis harum delicata nec. Te pro qualisque forensibus, no vix nostro necessitatibus, ei enim offendit usu. Sea mazim verear apeirian in, ea munere ignota repudiandae per, ad sea minim partiendo. Eum autem mollis ex, errem bonorum sapientem no eam, ad vim audire repudiandae. Te eos causae volutpat, sit decore quaeque ne.
                Prima argumentum vis eu, regione noluisse suavitate ius ut. Ex elitr alterum convenire sea, eam ad officiis principes. No tota interesset pro, vero errem necessitatibus id sit, audire definitiones et quo. Mei sonet consulatu ei, in cum augue elitr atomorum. Pri an alia alterum antiopam.
                In nam iusto torquatos, alia nullam iriure mel at, prodesset democritum deseruisse ne ius. Et nam dicat verterem, pro ut justo verear. Ad unum deseruisse eum, eu sed labore vivendo lobortis. An oratio qualisque definitionem vel, cu has mollis singulis, ei mel principes repudiare.

    [/html]

    0

    13

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    [html]
    <style>
    .anim750{
      transition: all 750ms ease-in-out;
    }

    #Awesome{
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
     
      backface-visibility: hidden;
    }

    #Awesome .sticky{
    transform: rotate(45deg);
    }

    #Awesome:hover .sticky{
    transform: rotate(10deg);
    }

    #Awesome .sticky{
    position: absolute;
    top: 0;
    left: 0;
    width:180px;
    height: 180px;
    }

    #Awesome .reveal .circle{
    box-shadow: 0 1px 0px rgba(0,0,0,.15);
     
      font-family: 'helvetica neue', arial;
      font-weight: 200;
      line-height: 140px;
      text-align: center;
     
      cursor: pointer;
    }

    #Awesome .reveal .circle{
    background: #fafafa;
    }

    #Awesome .circle_wrapper{
    position: absolute;
    width: 180px;
    height: 180px;
    left: 0px;
    top: 0px;
    overflow: hidden;
    }

    #Awesome .circle{
    position: absolute;
    width: 140px;
    height:  140px;
    margin: 20px;

    border-radius: 999px;
    }

    #Awesome .back{
    height: 10px;
    top: 30px;
    }

    #Awesome:hover .back{
    height: 90px;
    top: 110px;
    }

    #Awesome .back .circle{
    margin-top: -130px;
    background-color: #fbec3f;

    background-image: -webkit-linear-gradient(bottom, rgba(251,236,63,.0), rgba(255,255,255,.8));
    }

    #Awesome:hover .back .circle{
    margin-top: -50px;
    }

    #Awesome .front{
    height: 150px;
    bottom: 0;
    top: auto;

    -webkit-box-shadow: 0 -140px 20px -140px rgba(0,0,0,.3);
    }

    #Awesome:hover .front{
    height: 70px;

    -webkit-box-shadow: 0 -60px 10px -60px rgba(0,0,0,.1);
    }

    #Awesome .front .circle{
    margin-top: -10px;
    background: #fbec3f;

    background-image: -webkit-linear-gradient(bottom, rgba(251,236,63,.0) 75%, #f7bb37 95%);
      background-image: -moz-linear-gradient(bottom, rgba(251,236,63,.0) 75%, #f7bb37 95%);
      background-image: linear-gradient(bottom, rgba(251,236,63,.0) 75%, #f7bb37 95%);
    }

    #Awesome h4{
      font-family: 'helvetica neue', arial;
      font-weight: 200;
      text-align: center;
    position: absolute;
    width: 180px;
    height: 140px;
      line-height: 140px;

    transition: opacity 50ms linear 400ms;
    }

    #Awesome:hover h4{
    opacity: 0;

    transition: opacity 50ms linear 300ms;
    }

    #Awesome:hover .front .circle{
    margin-top: -90px;
    background-color: #e2d439;
    background-position: 0 100px;
    }
    </style>
    <div id="Awesome" class="anim750">

      <div class="reveal circle_wrapper">
        <div class="circle">У того есть паренек</div>
    </div>
               
    <div class="sticky anim750">
        <div class="front circle_wrapper anim750">
        <div class="circle anim750"></div>
      </div>
    </div>

      <h4>Кто откроет уголок</h4>
               
      <div class="sticky anim750">
        <div class="back circle_wrapper anim750">
        <div class="circle anim750"></div>
        </div>
    </div>
               
    </div>

    [/html]

    0

    14

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    [html]
    <style>

    .centerBox{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px
    }

    .categoryWrapper{
    height: 100px;
    width: 260px;
    background: url("") no-repeat center center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    }

    .categoryWrapper:after{
    position: absolute;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/# … ,95909b+99 */
    background: #a29ca9; /* Old browsers */
    background: -moz-linear-gradient(-45deg, #a29ca9 0%, #95909b 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #a29ca9 0%,#95909b 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #a29ca9 0%,#95909b 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a29ca9', endColorstr='#95909b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    content: '';
    opacity: 0;
        -webkit-transition: opacity 0.9s ease 0s;
    }

    .categoryWrapper:hover:after{
    opacity: 0.4;
    background-image: url(https://i.pinimg.com/474x/d6/0f/9c/d60f … 4acb95.jpg);
    background-size: cover;
    }

    .categoryWrapper h61{
    color: #000;
    font-size: 10px;
    letter-spacing: 2px;
    -webkit-transition: all 0.15s ease 0s;
    position: relative;
    z-index: 10;
    }

    .categoryWrapper:hover h61{
    transform: translateY(-10px);
    }

    .categoryWrapper button{
    position: absolute;
    transform: translatey(20px);
    -webkit-appearance: none;
    border: none;
    background: none;
    color:white;
    width: 80px;
    height:25px;
    font-size: 10px;
    padding: 0;
    margin: 0;
    outline: none;
    z-index: 10;
    }

    .categoryWrapper button span{
    display: block;
    position: relative;
    line-height: 10px;
    height: 25px;
    cursor: pointer;
    }

    .categoryWrapper button > span:after{
    content:'';
    position: absolute;
    top:0;
    left: 50%;
    width: 20px;
    height: 0;

    border: 1px solid white;
    border-left: none;
    border-bottom: none;

        transition: height 0.15s ease-out, width 0.15s ease-out 0.15s;
    }

    .categoryWrapper:hover button > span:after{
    width: calc(50% - 1px);
    height: calc(100% - 2px);
    transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
    }

    .categoryWrapper button > span:before{
    content:'';
    position: absolute;
    top:0;
    right: 50%;
    width: 20px;
    height: 0;

    border: 1px solid white;
    border-right: none;
    border-bottom: none;

        transition: height 0.15s ease-out, width 0.15s ease-out 0.15s;
    }

    .categoryWrapper:hover button > span:before{
    width: calc(50% - 1px);
    height: calc(100% - 2px);
    transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
    }

    .categoryWrapper button > span > span:before{
    content:'';
    position: absolute;
    bottom:0;
    right: 0%;
    width: 1px;
    height: 1px;
    opacity: 0;

    }

    .categoryWrapper:hover button > span > span:before{
    opacity: 1;
    border-bottom: 1px solid white;
    width: calc(50%);
    height: 1px;
    transition: opacity 0s ease-out 0.29s, width 0.15s ease-out 0.3s;
    }

    .categoryWrapper button > span > span:after{
    content:'';
    position: absolute;
    bottom:0;
    left: 0%;
    width: 1px;
    height: 1px;
    opacity: 0;

    }

    .categoryWrapper:hover button > span > span:after{
    opacity: 1;
    border-bottom: 1px solid white;
    width: calc(50%);
    height: 1px;
    transition: opacity 0s ease-out 0.29s, width 0.15s ease-out 0.3s;
    }

    .categoryWrapper button > span > span > span{
    transition: color 0.15s ease-out 0.3s;
    color: transparent;
    }

    .categoryWrapper:hover button > span > span > span{
    color:white;
    }

    .categoryWrapper button > span > span > span:after{
    position: absolute;
    top:0;left:0;right:0;bottom:0;
    color:#1f2e4d;
    content: attr(data-attr-span);
    width: 0%;
    height: 100%;
    background:white;
    white-space: nowrap;
    text-align: center;
    margin: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    transition: width 0.2s;
    }

    .categoryWrapper button:hover > span > span > span:after{
    width: 100%;
    }
    </style>
    <!-- THIS IS GOING TO BE A MAGENTO BUTTON -->

    <div class="centerBox">

    <div class="categoryWrapper">
        <h61>Администрация</h61>
        <button>
        <span>
            <span>
            <span data-attr-span="Написать">
                Великий и Ужасный
            </span>
            </span>
        </span>
        </button>
    </div>

    <div class="categoryWrapper">
        <h61>Администрация</h61>
        <button>
        <span>
            <span>
            <span data-attr-span="Написать">
                Великий и Ужасный
            </span>
            </span>
        </span>
        </button>
    </div>

    <div class="categoryWrapper">
        <h61>Администрация</h61>
        <button>
        <span>
            <span>
            <span data-attr-span="Написать">
                Великий и Ужасный
            </span>
            </span>
        </span>
        </button>
    </div>

    <div class="categoryWrapper">
        <h61>Администрация</h61>
        <button>
        <span>
            <span>
            <span data-attr-span="Написать">
                Великий и Ужасный
            </span>
            </span>
        </span>
        </button>
    </div>

    </div>

    [/html]

    0

    15

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    [html]
    <style>
    * {
      box-sizing: border-box;
      margin: 0; padding: 0;
    }
    :active, :hover, :focus {
      outline: 0!important;
      outline-offset: 0;
    }
    ::before,
    ::after {
      position: absolute;
      content: "";
    }

    .btn-holder {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 1000px;
      margin: 10px auto 35px;
    }
    .btn {
      position: relative;
      display: inline-block;
      width: auto; height: auto;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin: 0px 25px 15px;
      min-width: 150px;
    }
      .btn span {         
        position: relative;
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        letter-spacing: 2px;
        text-transform: uppercase;
        top: 0; left: 0;
        width: 100%;
        padding: 15px 20px;
        transition: 0.3s;
      }

    /*--- btn-1 ---*/
    .btn-1::before {
      background-color: rgb(28, 31, 30);
      transition: 0.3s ease-out;
    }
    .btn-1 span {
      color: rgb(255,255,255);
      border: 1px solid rgb(28, 31, 30);
      transition: 0.2s 0.1s;
    }
    .btn-1 span:hover {
      color: rgb(28, 31, 30);
      transition: 0.2s 0.1s;
    }

    /* 1.hover-filled-slide-down */
    .btn.hover-filled-slide-down::before {
      bottom: 0; left: 0; right: 0;
      height: 100%; width: 100%;
    }
    .btn.hover-filled-slide-down:hover::before {
      height: 0%;
    }

    /* 2.hover-filled-slide-up */
    .btn.hover-filled-slide-up::before {
      top: 0; left: 0; right: 0;
      height: 100%; width: 100%;
    }
    .btn.hover-filled-slide-up:hover::before {
      height: 0%;
    }

    /* 3.hover-filled-slide-left */
    .btn.hover-filled-slide-left::before {
      top: 0; bottom: 0; left: 0;
      height: 100%; width: 100%;
    }
    .btn.hover-filled-slide-left:hover::before {
      width: 0%;
    }

    /* 4. hover-filled-slide-right */
    .btn.hover-filled-slide-right::before {
      top:0; bottom: 0; right: 0;
      height: 100%; width: 100%;
    }
    .btn.hover-filled-slide-right:hover::before {
      width: 0%;
    }

    /* 5. hover-filled-opacity */
    .btn.hover-filled-opacity::before {
      top:0; bottom: 0; right: 0;
      height: 100%; width: 100%;
      opacity: 1;
    }
    .btn.hover-filled-opacity:hover::before {
      opacity: 0;
    }

    /*--- btn-2 ---*/
    .btn-2::before {
      background-color: rgb(28, 31, 30);
      transition: 0.3s ease-out;
    }
    .btn-2 span {
      color: rgb(28, 31, 30);
      border: 1px solid rgb(28, 31, 30);
      transition: 0.2s;
    } 
    .btn-2 span:hover {
      color: rgb(255,255,255);
      transition: 0.2s 0.1s;
    }

    /* 6. hover-slide-down */
    .btn.hover-slide-down::before {
      top: 0; left: 0; right: 0;
      height: 0%; width: 100%;
    }
    .btn.hover-slide-down:hover::before {
      height: 100%;
    }

    /* 7. hover-slide-up */
    .btn.hover-slide-up::before {
      bottom: 0; left: 0; right: 0;
      height: 0%; width: 100%;
    }
    .btn.hover-slide-up:hover::before {
      height: 100%;
    }

    /* 8. hover-slide-left */
    .btn.hover-slide-left::before {
      top: 0; bottom: 0; right: 0;
      height: 100%; width: 0%;
    }
    .btn.hover-slide-left:hover::before {
      width: 100%;
    }

    /* 9. hover-slide-right */
    .btn.hover-slide-right::before {
      top: 0; bottom: 0; left: 0;
      height: 100%; width: 0%;
    }
    .btn.hover-slide-right:hover::before {
      width: 100%;
    }

    /* 10. hover-opacity */
    .btn.hover-opacity::before {
      top:0; bottom: 0; right: 0;
      height: 100%; width: 100%;
      opacity: 0;
    }
    .btn.hover-opacity:hover::before {
      opacity: 1;
    }

    /*--- btn-3 ---*/
    .btn-3 {
      padding: 5px;
    }
    .btn-3 span {
      color: rgb(255, 255, 255);
      background-color: rgb(54, 56, 55);
    }
    .btn-3::before,
    .btn-3::after {
      background: transparent;
      z-index: 2;
    }

    /* 11. hover-border-1 */
    .btn.hover-border-1::before,
    .btn.hover-border-1::after {
      width: 10%; height: 25%;
      transition: 0.35s;
    }
    .btn.hover-border-1::before {
      top: 0; left: 0;
      border-left: 1px solid rgb(28, 31, 30);
      border-top: 1px solid rgb(28, 31, 30);
    }
    .btn.hover-border-1::after {
      bottom: 0; right: 0;
      border-right: 1px solid rgb(28, 31, 30);
      border-bottom: 1px solid rgb(28, 31, 30);
    }
    .btn.hover-border-1:hover::before,
    .btn.hover-border-1:hover::after {
      width: 99%;
      height: 98%;
    }

    /* 12. hover-border-2 */
    .btn.hover-border-2::before,
    .btn.hover-border-2::after {
      width: 10%; height: 25%;
      transition: 0.35s;
    }
    .btn.hover-border-2::before {
      bottom: 0; left: 0;
      border-left: 1px solid rgb(28, 31, 30);
      border-bottom: 1px solid rgb(28, 31, 30);
    }
    .btn.hover-border-2::after {
      top: 0; right: 0;
      border-right: 1px solid rgb(28, 31, 30);
      border-top: 1px solid rgb(28, 31, 30);
    }
    .btn.hover-border-2:hover::before,
    .btn.hover-border-2:hover::after {
      width: 99%;
      height: 99%;
    }

    /* 13. hover-border-3 */
    .btn.hover-border-3::before,
    .btn.hover-border-3::after {
      width: 0%; height: 0%;
      opacity: 0;
      transition: width 0.2s 0.15s linear, height 0.15s linear, opacity 0s 0.35s;
    }
    .btn.hover-border-3::before {
      top: 0; right: 0;
      border-top: 1px solid rgb(28, 31, 30);
      border-left: 1px solid rgb(28, 31, 30);
    }
    .btn.hover-border-3::after {
      bottom: 0; left: 0;
      border-bottom: 1px solid rgb(28, 31, 30);
      border-right: 1px solid rgb(28, 31, 30);
    }
    .btn.hover-border-3:hover::before,
    .btn.hover-border-3:hover::after {
      width: 100%; height: 99%;
      opacity: 1;
      transition: width 0.2s linear, height 0.15s 0.2s linear, opacity 0s;   
    }

    /* 14. hover-border-4 */
    .btn.hover-border-4::before,
    .btn.hover-border-4::after {
      width: 0%; height: 0%;
      opacity: 0;
      transition: width 0.2s linear, height 0.15s 0.2s ease-out, opacity 0s 0.35s;
    }
    .btn.hover-border-4::before {
      bottom: 0; left: -1px;
      border-top: 1px solid rgb(28, 31, 30);
      border-left: 1px solid rgb(28, 31, 30);
    }
    .btn.hover-border-4::after {
      top: 0; right: 0;
      border-bottom: 1px solid rgb(28, 31, 30);
      border-right: 1px solid rgb(28, 31, 30);
    }
    .btn.hover-border-4:hover::before,
    .btn.hover-border-4:hover::after {
      width: 100%; height: 99%;
      opacity: 1;
      transition: width 0.2s 0.15s ease-out, height 0.15s ease-in, opacity 0s;   
    }

    /* 15. hover-border-5 */
    .btn.hover-border-5::before,
    .btn.hover-border-5::after {
      width: 0%; height: 0%;
      opacity: 0;
    }
    .btn.hover-border-5::before {
      top: 0; right: 0;
      border-top: 1px solid rgb(28, 31, 30);
      border-left: 1px solid rgb(28, 31, 30);
      transition: width 0.2s 0.5s ease-out, height 0.15s 0.35s linear, opacity 0s 0.7s;
    }
    .btn.hover-border-5::after {
      bottom: 0; left: 0px;
      border-bottom: 1px solid rgb(28, 31, 30);
      border-right: 1px solid rgb(28, 31, 30);
      transition: width 0.2s 0.15s linear, height 0.15s ease-in, opacity 0s 0.35s;
    }
    .btn.hover-border-5:hover::before,
    .btn.hover-border-5:hover::after {
      width: 100%; height: 96%;
      opacity: 1;
    }
    .btn.hover-border-5:hover::before {
      transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s;   /* 1,2 */
    }
    .btn.hover-border-5:hover::after {
      transition: width 0.2s 0.35s linear, height 0.15s 0.5s ease-out, opacity 0s 0.3s;
    }

    /*--- btn-4 ---*/
    .btn-4 span {
      color: rgb(28, 31, 30);
      background-color: rgb(245,245,245);
    }
    .btn-4 span:hover {
      color: rgb(54, 56, 55);
    }
    .btn-4::before,
    .btn-4::after {
      width: 15%; height: 2px;
      background-color: rgb(54, 56, 55);
      z-index: 2;
    }

    /* 16. hover-border-6 */
    .btn.hover-border-6::before,
    .btn.hover-border-6::after {
      top: 0;
      transition: width 0.2s 0.35s ease-out;
    }
    .btn.hover-border-6::before {
      right: 50%;
    }
    .btn.hover-border-6::after {
      left: 50%;
    }
    .btn.hover-border-6:hover::before,
    .btn.hover-border-6:hover::after {
      width: 50%;
      transition: width 0.2s ease-in;   
    }

    .btn.hover-border-6 span::before,
    .btn.hover-border-6 span::after {
      width: 0%; height: 0%;
      background: transparent;
      opacity: 0;
      z-index: 2;
      transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
    }
    .btn.hover-border-6 span::before {
      top: 0; left: 0;
      border-left: 2px solid rgb(54, 56, 55);
      border-bottom: 2px solid rgb(54, 56, 55);
    }
    .btn.hover-border-6 span::after {
      top: 0; right: 0;
      border-right: 2px solid rgb(54, 56, 55);
      border-bottom: 2px solid rgb(54, 56, 55);
    }
    .btn.hover-border-6 span:hover::before,
    .btn.hover-border-6 span:hover::after {
      width: 50%; height: 96%;
      opacity: 1;
      transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;   
    }

    /* 17. hover-border-7 */
    .btn.hover-border-7::before,
    .btn.hover-border-7::after {
      bottom: 0;
      transition: width 0.2s 0.35s ease-out;
    }
    .btn.hover-border-7::before {
      right: 50%;
    }
    .btn.hover-border-7::after {
      left: 50%;
    }
    .btn.hover-border-7:hover::before,
    .btn.hover-border-7:hover::after {
      width: 50%;
      transition: width 0.2s ease-in;   
    }

    .btn.hover-border-7 span::before,
    .btn.hover-border-7 span::after {
      width: 0%; height: 0%;
      background: transparent;
      opacity: 0;
      z-index: 2;
      transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
    }
    .btn.hover-border-7 span::before {
      bottom: 0; left: 0;
      border-left: 2px solid rgb(54, 56, 55);
      border-top: 2px solid rgb(54, 56, 55);
    }
    .btn.hover-border-7 span::after {
      bottom: 0; right: 0;
      border-right: 2px solid rgb(54, 56, 55);
      border-top: 2px solid rgb(54, 56, 55);
    }
    .btn.hover-border-7 span:hover::before,
    .btn.hover-border-7 span:hover::after {
      width: 50%; height: 96%;
      opacity: 1;
      transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;   
    }

    /* 18. hover-border-8 */
    .btn.hover-border-8::before,
    .btn.hover-border-8::after {
      bottom: 0;
      width: 15%;
      transition: width 0.2s 0.35s ease-out;
    }
    .btn.hover-border-8::before {
      right: 50%;
    }
    .btn.hover-border-8::after {
      left: 50%;
    }
    .btn.hover-border-8:hover::before {
      width: 50%;
      transition: width 0.2s ease-in;   
    }
    .btn.hover-border-8:hover::after {
      width: 50%;
      transition: width 0.1s ease-in;   
    }

    .btn.hover-border-8 span::before,
    .btn.hover-border-8 span::after {
      width: 0%; height: 0%;
      bottom: 0;
      background: transparent;
      opacity: 0;
      z-index: 2;
    }
    .btn.hover-border-8 span::before {
      left: 0%;
      border-left: 2px solid rgb(54, 56, 55);
      transition: height 0.25s ease-in, opacity 0s 0.35s;   
    }
    .btn.hover-border-8 span:hover::before {
      height: 96%;
      opacity: 1;
      transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;   
    }
    .btn.hover-border-8 span::after {
      right: 0%;
      border-right: 2px solid rgb(54, 56, 55);
      border-top: 2px solid rgb(54, 56, 55);
      transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;   
    }
    .btn.hover-border-8 span:hover::after {
      width: 99%; height: 96%;
      opacity: 1;
      transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;   
    }

    /* 19. hover-border-9 */
    .btn.hover-border-9::before,
    .btn.hover-border-9::after {
      bottom: 0;
      width: 15%;
      transition: width 0.2s 0.35s ease-out;
    }
    .btn.hover-border-9::before {
      right: 50%;
    }
    .btn.hover-border-9::after {
      left: 50%;
    }
    .btn.hover-border-9:hover::before {
      width: 50%;
      transition: width 0.1s ease-in;   
    }
    .btn.hover-border-9:hover::after {
      width: 50%;
      transition: width 0.2s ease-in;   
    }

    .btn.hover-border-9 span::before,
    .btn.hover-border-9 span::after {
      width: 0%; height: 0%;
      bottom: 0;
      background: transparent;
      opacity: 0;
      z-index: 2;
    }
    .btn.hover-border-9 span::after {
      right: 0%;
      border-right: 2px solid rgb(54, 56, 55);
      transition: height 0.25s ease-in, opacity 0s 0.35s;   
    }
    .btn.hover-border-9 span:hover::after {
      height: 96%;
      opacity: 1;
      transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;   
    }
    .btn.hover-border-9 span::before {
      left: 0%;
      border-left: 2px solid rgb(54, 56, 55);
      border-top: 2px solid rgb(54, 56, 55);
      transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;   
    }
    .btn.hover-border-9 span:hover::before {
      width: 98.5%; height: 96%;
      opacity: 1;
      transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;   
    }

    /* 20. hover-border-10 */
    .btn.hover-border-10::before,
    .btn.hover-border-10::after {
      left: 0%;
      height: 30%;
      width: 2px;
      transition: height 0.2s 0.35s ease-out;
    }
    .btn.hover-border-10::before {
      top: 50%;
    }
    .btn.hover-border-10::after {
      bottom: 50%;
    }
    .btn.hover-border-10:hover::before {
      height: 50%;
      transition: height 0.2s ease-in;   
    }
    .btn.hover-border-10:hover::after {
      height: 50%;
      transition: height 0.1s ease-in;   
    }

    .btn.hover-border-10 span::before,
    .btn.hover-border-10 span::after {
      width: 0%; height: 0%;
      background: transparent;
      opacity: 0;
      z-index: 2;
    }
    .btn.hover-border-10 span::after {
      bottom: 0; left: 0%;
      border-bottom: 2px solid rgb(54, 56, 55);
      transition: width 0.25s ease-in, opacity 0s 0.35s;   
    }
    .btn.hover-border-10 span:hover::after {
      width: 100%;
      opacity: 1;
      transition: width 0.25s 0.2s ease-out, opacity 0s 0.2s;   
    }
    .btn.hover-border-10 span::before {
      top: 0%; left: 0%;
      border-top: 2px solid rgb(54, 56, 55);
      border-right: 2px solid rgb(54, 56, 55);
      transition: height 0.15s ease-in, width 0.2s 0.15s linear, opacity 0s 0.35s;   
    }
    .btn.hover-border-10 span:hover::before {
      width: 98.5%; height: 96%;
      opacity: 1;
      transition: width 0.2s 0.1s linear, height 0.15s 0.3s ease-out, opacity 0s 0.1s;   
    }

    /*--- btn-5 ---*/
    .btn-5 span {
      color: rgb(28, 31, 30);
      border: 2px solid rgb(249, 211, 27);
      transition: 0.2s;
    }
    .btn-5 span:hover {
      background-color: rgb(245,245,245);
    }

    /* 21. hover-border-11 */
    .btn.hover-border-11::before,
    .btn.hover-border-11::after {
      width: 100%; height: 2px;
      background-color: rgb(54, 56, 55);
      z-index: 2;
      transition: 0.35s;
    }
    .btn.hover-border-11::before {
      top: 0; right: 0;
    }
    .btn.hover-border-11::after {
      bottom: 0; left: 0;
    }
    .btn.hover-border-11:hover::before,
    .btn.hover-border-11:hover::after {
      width: 0%;
      transition: 0.2s 0.2s ease-out;
    }

    .btn.hover-border-11 span::before,
    .btn.hover-border-11 span::after {
      width: 2px; height: 100%;
      background-color: rgb(54, 56, 55);
      z-index: 2;
      transition: 0.25s;
    }
    .btn.hover-border-11 span::before {
      bottom: 0; right: -2px;
    }
    .btn.hover-border-11 span::after {
      top: 0; left: -2px;
    }
    .btn.hover-border-11 span:hover::before,
    .btn.hover-border-11 span:hover::after {
      height: 0%;
    }

    </style>

    <div class="btn-holder">
      <button class="btn btn-1 hover-filled-slide-down">
        <span>hover me</span>
      </button>
      <button class="btn btn-1 hover-filled-slide-up">
        <span>hover me</span>
      </button>
      <button class="btn btn-1 hover-filled-slide-left">
        <span>hover me</span>
      </button>
      <button class="btn btn-1 hover-filled-slide-right">
        <span>hover me</span>
      </button>
      <button class="btn btn-1 hover-filled-opacity">
        <span>hover me</span>
      </button>
    </div>
    <div class="btn-holder">
      <button class="btn btn-2 hover-slide-down">
        <span>hover me</span>
      </button>
      <button class="btn btn-2 hover-slide-up">
        <span>hover me</span>
      </button>
      <button class="btn btn-2 hover-slide-left">
        <span>hover me</span>
      </button>
      <button class="btn btn-2 hover-slide-right">
        <span>hover me</span>
      </button>
      <button class="btn btn-2 hover-opacity">
        <span>hover me</span>
      </button>
    </div>
    <div class='btn-holder'>
      <button class="btn btn-3 hover-border-1">
        <span>hover me</span>
      </button>
      <button class="btn btn-3 hover-border-2">
        <span>hover me</span>
      </button>
      <button class="btn btn-3 hover-border-3">
        <span>hover me</span>
      </button>
      <button class="btn btn-3 hover-border-4">
        <span>hover me</span>
      </button>
      <button class="btn btn-3 hover-border-5">
        <span>hover me</span>
      </button>
    </div>
    <div class="btn-holder">
      <button class="btn btn-4 hover-border-6">
        <span>hover me</span>
      </button>
      <button class="btn btn-4 hover-border-7">
        <span>hover me</span>
      </button>
      <button class="btn btn-4 hover-border-8">
        <span>hover me</span>
      </button>
      <button class="btn btn-4 hover-border-9">
        <span>hover me</span>
      </button>
      <button class="btn btn-4 hover-border-10">
        <span>hover me</span>
      </button>
    </div>
    <div class="btn-holder">
      <button class="btn btn-5 hover-border-11">
        <span>hover me</span>
      </button>
    </div>

    [/html]

    +1

    16

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    545445245

    +1

    17

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    выделенная тема

    0

    18

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    выделенная тема

    +1

    19

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    cacacascsSC

    +1

    20

    • Автор: envy
    • пример длинного статуса
    • envy
    • личное дело
    • Деятельность
      ответ
      Лояльность
      ответ
    • Сообщений: 401
    • Уважение: +60
    • Последний визит:
      2026-06-02 21:42:05

    [icon]https://upforme.ru/uploads/001a/74/14/14/127155.jpg[/icon]

    0

    Страница: 1 2  

    Вы здесь » MadHat's Test » все для нового проекта! » выделенная тема

    Рейтинг форумов | Создать форум бесплатно