<!DOCTYPE html>
<html lang="en">

<body>

<h1>модальные окна</h1>
    <h2>Курсы javascript</h2>
    <button class="custom-btn btn-10"><a href="#openModal-1">Анекдоты</a></button>
    <button class="custom-btn btn-6"><a href="#openModal-2">Текст ни о чем №1</a></button>

<button class="custom-btn btn-15"><a href="#openModal-3">Текст ни о чем №2</a></button>

<button class="custom-btn btn-7"><a href="#openModal-4">Растения знают как и куда расти</a></button>
    <button class="custom-btn btn-17" style="--color:#1e9bff;"><a href="#openModal-5"> <span></span>
      <span></span>
      <span></span>
      <span></span>Золото</a></button>
    <button class="custom-btn btn-16" style="--color: rgba(30, 3, 92, 0.6); 
    background-color: var(--c);"><a href="#openModal-6"><span class='glowing-txt'>А<span class='faulty-letter'>Т</span>ОМЫ</span></a></button>

<div id="openModal-1" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Анекдоты</h3>
                    <a href="#close" title="Close" class="close">×</a>
                </div>
                <div class="modal-body">
                    <p>Нам не в чем каяться, и потому нам нет прощения.</p>
                    <p>Взросление - это когда понимаешь, что родители не идеальные, а мудрость - что ты не идеальный.
                    </p>
                    <p>Собрался еврейский конгресс с повесткой дня: «Почему евреи отвечают вопросом на
                        вопрос?»....Конгресс вынес резолюцию: «Ну и что?»</p>
                    <p>Психоаналитик - это человек, который за ваши деньги даст вам советы,
                        которые вы другим уже давали бесплатно.</p>
                </div>
            </div>
        </div>
    </div>
    
    <div id="openModal-2" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Текст №1</h3>
                    <a href="#close" title="Close" class="close">×</a>
                </div>
                <div class="modal-body">
                    <p>Значимость этих проблем настолько очевидна, что сложившаяся структура организации позволяет
                        выполнять важные задания по разработке форм развития. Не следует, однако забывать, что начало
                        повседневной работы по формированию позиции обеспечивает широкому кругу (специалистов) участие в
                        формировании соответствующий условий активизации. Равным образом дальнейшее развитие различных
                        форм деятельности требуют от нас анализа существенных финансовых и административных условий.
                        Таким образом начало повседневной работы по формированию позиции обеспечивает широкому кругу
                        (специалистов) участие в формировании систем массового участия. Идейные соображения высшего
                        порядка, а также постоянное информационно-пропагандистское обеспечение нашей деятельности
                        способствует подготовки и реализации соответствующий условий активизации. Не следует, однако
                        забывать, что реализация намеченных плановых заданий в значительной степени обуславливает
                        создание дальнейших направлений развития.</p>
                </div>
            </div>
        </div>
    </div>
    
    <div id="openModal-3" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Текст №2</h3>
                    <a href="#close" title="Close" class="close">×</a>
                </div>
                <div class="modal-body">
                    <p>Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности позволяет
                        выполнять важные задания по разработке форм развития. Равным образом постоянное
                        информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу
                        (специалистов) участие в формировании новых предложений.
                    </p>
                    <p>
                        Товарищи! дальнейшее развитие различных форм деятельности играет важную роль в формировании
                        существенных финансовых и административных условий. Равным образом рамки и место обучения кадров
                        требуют от нас анализа направлений прогрессивного развития. Не следует, однако забывать, что
                        реализация намеченных плановых заданий позволяет оценить значение позиций, занимаемых
                        участниками в отношении поставленных задач. Разнообразный и богатый опыт начало повседневной
                        работы по формированию позиции способствует подготовки и реализации соответствующий условий
                        активизации
                    </p>
                    <img src="https://faktodrom.com/i/0000ev00lvdl0gw/s_legkim_parom.png" alt="Могли построить" width="250" height="300">
                </div>
            </div>
        </div>
    </div>

<div id="openModal-4" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Как прорастающие семена растений знают, где - верх, а где - низ и в какую
                        сторону расти?</h3>
                    <a href="#close" title="Close" class="close">×</a>
                </div>
                <div class="modal-body">
                    <p>Этот, казалось бы детский вопрос, очень интересен. Ведь посаженное в землю семечко однозначно не
                        вырастет корнями вверх. Как же семя, находясь в темной земле прорастает навстречу солнцу?
                        Оказывается, в живых клетках растения присутствуют так называемые крахмальные зерна - статолиты,
                        плотность которых выше, чем у клеточной цитоплазмы. Поэтому статолиты оседают вниз под действием
                        силы тяжести и создают механическое напряжение в опутывающей их сети нитей из белка актина. Этот
                        процесс запускает цепь специфических биохимических реакций, которые изменяют распределение в
                        теле растения различных гормонов (в том числе, ауксина), который и определяют конкретное
                        направление деления клеток.
                        Интересно, что если поместить проросшее семечко в клиностат (устройство, медленно вращающее его
                        в вертикальной плоскости, чтобы верх и низ все время менялись местами), то его корешок и зачаток
                        стебля продолжают расти в направлении, выбранном до начала вращения. А вот в невесомости корни
                        растения будут расти в случайном направлении, а стебель — в направлении источника света.</p>
                    <img src="https://faktodrom.com/i/0000e700bCOt0gw/untitled.jpeg" alt="Как расти" width="400" height="300">
                </div>
            </div>
        </div>
    </div>

<div id="openModal-5" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Золото Текст №5</h3>
                    <a href="#close" title="Close" class="close">×</a>
                </div>
                <div class="modal-body">
                    <p>
                        <b>Правда ли, что можно «сделать» золото?</b>
                        <br>
                  Оказывается, извечная мечта алхимиков о превращении неблагородных металлов в золото вполне осуществима! Правда, под силу это лишь ядерной химии.
                  Известно, что в ядерном реакторе одни элементы превращаются в другие, например уран — в плутоний, сера — в хлор, железо — в никель. В нем же можно «изготовить» и искусственное золото. Такой синтетический «драгметалл» был получен еще в 1947 году американскими физиками, в доказательство чему все 35 мкг золота, добытого из 100 мг ртути, сегодня можно увидеть в Чикагском музее науки и промышленности. Наиболее доступный способ изготовления искусственного золота — радиоактивный распад некоторых изотопов соседних элементов (ртути и платины). Хотя превращать в золото платину очень невыгодно, так как последняя дороже золота.
                  Один из способов создания золота в ядерном реакторе - это облучение ртути-196 изотопа нейтронами. Ртути-196 является стабильным изотопом ртути, но в результате захвата нейтрона он может превратиться в ртуть-197, которая затем распадается, образуя золото-197. Этот процесс называется "активацией ртути". Однако процесс активации в ядерном реакторе является чрезвычайно дорогостоящим и трудоемким процессом, дающие весьма незначительное количество «благородного металла», поэтому создание золота в ядерном реакторе не используется в промышленности.
                  До сих пор золото добывается из недр планеты, используя различные технологии добычи, такие как горное дело, гидравлическая добыча и т.д.
                    </p>
                    <img src="https://ostrovrusa.ru/wp-content/uploads/2019/11/9885e51a333e7c5.jpg" alt="Золото" width="400" height="300">
                </div>
            </div>
        </div>
    </div>

<div id="openModal-6" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Сколько лет могут существовать атомы? Текст №5</h3>
                    <a href="#close" title="Close" class="close">×</a>
                </div>
                <div class="modal-body">
                    <p>Задумывались ли вы о "жизненном цикле" атомов? Как долго они могут существовать?
                        По-разному, но стабильные — больше 10^34 лет! Некоторые радиоактивные изотопы распадаются за
                        доли секунды. Другие живут миллиарды лет.
                        Рекорд среди них принадлежит теллуру-128 с периодом полураспада 2^1024 лет. Это в 160 трлн раз
                        больше возраста Вселенной. Однако и стабильные изотопы, которые не подвержены радиоактивному
                        распаду, по-видимому, тоже не вечны. Связано это с тем, что сами кварки, из которых состоят
                        протоны и нейтроны, должны, хоть и крайне редко, распадаться, превращаясь в лептоны (электроны
                        или нейтрино). Физики называют это нарушением закона сохранения барионного числа, то есть
                        суммарного количества кварков и (со знаком минус) антикварков.
                        Как показал физик Cахаров, без этого нарушения не объяснить, почему в нашей Вселенной есть
                        только обычная материя, но почти нет антивещества. По разным теоретическим оценкам, среднее
                        время жизни протона, то есть ядра атома водорода, составляет от 10^28 до 10^36 лет.
                        Наиболее стабильные атомы - это атомы с наиболее высокими значениями ядерной стабильности,
                        которая определяется соотношением числа нейтронов к числу протонов в ядре. Атомы с более равными
                        значениями числа протонов и нейтронов в ядре обычно являются более стабильными.
                        Конечно, это не относится к радиоактивным атомам, которые могут распадаться на более легкие
                        атомы в результате испускания радиоактивного излучения. Время распада радиоактивных атомов может
                        сильно варьироваться в зависимости от их типа. Например, время полураспада углерода-14
                        составляет около 5730 лет, в то время как время полураспада урана-238 составляет около 4,5
                        миллиарда лет.
                        Атомы, как уже упоминалось, могут существовать в различных формах в течение очень длительного
                        времени. В общем, атомы могут существовать бесконечно долго, если они не подвергаются каким-либо
                        разрушительным процессам.</p>
                    <img src="https://fikiwiki.com/uploads/posts/2022-02/1645007511_6-fikiwiki-com-p-kartinki-atom-6.jpg" alt="Атомы" width="400" height="300">
                </div>
            </div>
        </div>
    </div>

<div id="openModal-7" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Как устроиться на работу, без опыта работы</h3>
                    <a href="#close" title="Close" class="close">×</a>
                </div>
                <div class="modal-body">
                    
<iframe width="560" height="315" src="https://www.youtube.com/embed/ES8OpcxjiPc?si=fJvxp3z8avVdBMpI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

</div>
            </div>
        </div>
    </div>

</html>

/* свойства модального окна по умолчанию */
.modal {
    position: fixed;
    /* фиксированное положение */
    width: 100cv;
    /* height: 100ch; */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(44, 4, 254, 0.7);
    /* цвет фона */
    z-index: 1050;
    opacity: 0;
    /* по умолчанию модальное окно прозрачно */
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    /* анимация перехода */
    pointer-events: none;
    /* элемент невидим для событий мыши */
  }

/* при отображении модального окно */
  .modal:target {
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
  }

/* ширина модального окна и его отступы от экрана */
  .modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
  }

@media (min-width: 576px) {
    .modal-dialog {
      max-width: 500px;
      margin: 30px auto;
    }
  }

/* свойства для блока, содержащего контент модального окна */
  .modal-content {
    position: relative;
    width: 800px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #41eaf0;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(13, 11, 167, 0.2);
    border-radius: .3rem;
    outline: 0;
  }

@media (min-width: 768px) {
    .modal-content {
      -webkit-box-shadow: 0 5px 15px rgba(200, 235, 6, 0.5);
      box-shadow: 0 5px 15px rgba(28, 119, 0, 0.5);
    }
  }

/* свойства для заголовка модального окна */
  .modal-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #024a6e;
  }

.modal-title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    font-weight: 500;
  }

/* свойства для кнопки "Закрыть" */
  .close {
    float: right;
    font-family: sans-serif;
    font-size: 84px;
    font-weight: 700;
    line-height: 1;
    color: #a10202;
    text-shadow: 0 3px 0 #e7eb03;
    text-decoration: none;
  }

/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
  .close:focus,
  .close:hover {
    color: #f4f804;
    text-decoration: none;
    cursor: pointer;
    opacity: 1.75;
  }

/* свойства для блока, содержащего основное содержимое окна */
  .modal-body {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 15px;
    overflow: auto;
  }

.custom-btn {
    width: 130px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: 27px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
     box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
     7px 7px 20px 0px rgba(0,0,0,.1),
     4px 4px 5px 0px rgba(0,0,0,.1);
    outline: none;
  }

.btn-5 {
    display:block;
    width: 380px;
    height: 80px;
    border-radius: 1vh;    
    margin: .5em 43em;
  }

.btn-6 {
    display:block;
    color: chartreuse;
    width: 380px;
    height: 80px;
    border-radius: 3vh;
    margin: 2.8em 13em;
  }
  
.btn-15 {
    display:block;
    width: 380px;
    height: 80px;
    border-radius: 3vh;    
    margin: 1em 16em;
  }
  
 .btn-7 {
    display:block;
    color: #381c9e;
    width: 380px;
    height: 80px;
    border-radius: 3vh;
    margin: 1.5em 21em;
  }

.btn-10 {
    display:block;
    width: 380px;
    height: 80px;
    border-radius: 3vh;
    margin: .1em 3em;
  }

.btn-17 {
    display:block;
    width: 380px;
    height: 80px;
    border-radius: 3vh;
    margin: 2.0em 31em;
  }

.btn-16 {
    display:block;
    border-radius: 3vh;
    margin: 2.1em 38em;
  }

/* btn-5 */
  .btn-5 {
    --c:  #039e3e; /* the color*/
    
    box-shadow: 0 0 0 .1em inset var(--c); 
    --_g: linear-gradient(var(--c) 0 0) no-repeat;
    background: 
      var(--_g) calc(var(--_p,0%) - 100%) 0%,
      var(--_g) calc(200% - var(--_p,0%)) 0%,
      var(--_g) calc(var(--_p,0%) - 100%) 100%,
      var(--_g) calc(200% - var(--_p,0%)) 100%;
    background-size: 50.5% calc(var(--_p,0%)/2 + .5%);
    outline-offset: .1em;
    transition: background-size .4s, background-position 0s .4s;
  }
  .btn-5:hover {
    --_p: 100%;
    transition: background-position .4s, background-size 0s;
  }
  .btn-5:active {
    box-shadow: 0 0 9e9q inset rgba(79, 28, 197, 0.6); 
    background-color: var(--c);
    color: #219903;
  }
  
  .btn-5:hover .glowing-txt {
            animation: none;
          }
          
          .btn-5:hover .faulty-letter {
            animation: none;
            text-shadow: none;
            opacity: 1;
          }
          
          .btn-5:hover:before {
            filter: blur(1.5em);
            opacity: 1;
          }
          
          .btn-5:hover:after {
            opacity: 1;
          }

/* btn-6 */
  .btn-6 {
    background: rgb(247,150,192);
  background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
    line-height: 42px;
    padding: 0;
    border: none;
  }
  .btn-6 span {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .btn-6:before,
  .btn-6:after {
    position: absolute;
    content: "";
    height: 0%;
    width: 1px;
   box-shadow:
     -1px -1px 20px 0px rgba(255,255,255,1),
     -4px -4px 5px 0px rgba(255,255,255,1),
     7px 7px 20px 0px rgba(0,0,0,.4),
     4px 4px 5px 0px rgba(0,0,0,.3);
  }
  .btn-6:before {
    right: 0;
    top: 0;
    transition: all 500ms ease;
  }
  .btn-6:after {
    left: 0;
    bottom: 0;
    transition: all 500ms ease;
  }
  .btn-6:hover{
    background: transparent;
    color: #76aef1;
    box-shadow: none;
  }
  .btn-6:hover:before {
    transition: all 500ms ease;
    height: 100%;
  }
  .btn-6:hover:after {
    transition: all 500ms ease;
    height: 100%;
  }
  .btn-6 span:before,
  .btn-6 span:after {
    position: absolute;
    content: "";
    box-shadow:
     -1px -1px 20px 0px rgba(255,255,255,1),
     -4px -4px 5px 0px rgba(255,255,255,1),
     7px 7px 20px 0px rgba(0,0,0,.4),
     4px 4px 5px 0px rgba(0,0,0,.3);
  }
  .btn-6 span:before {
    left: 0;
    top: 0;
    width: 0%;
    height: .5px;
    transition: all 500ms ease;
  }
  .btn-6 span:after {
    right: 0;
    bottom: 0;
    width: 0%;
    height: .5px;
    transition: all 500ms ease;
  }
  .btn-6 span:hover:before {
    width: 100%;
  }
  .btn-6 span:hover:after {
    width: 100%;
  }
/* btn-7 */
  .btn-7 {
    background: linear-gradient(0deg, rgb(7, 218, 60) 0%, rgb(1, 95, 21) 100%);
      line-height: 42px;
      padding: 0;
      border: none;
    }
    .btn-7 span {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
    }
    .btn-7:before,
    .btn-7:after {
      position: absolute;
      content: "";
      right: 0;
      bottom: 0;
      background: rgba(251,75,2,1);
      box-shadow:
       -7px -7px 20px 0px rgba(255,255,255,.9),
       -4px -4px 5px 0px rgba(255,255,255,.9),
       7px 7px 20px 0px rgba(0,0,0,.2),
       4px 4px 5px 0px rgba(0,0,0,.3);
      transition: all 0.3s ease;
    }
    .btn-7:before{
       height: 0%;
       width: 2px;
    }
    .btn-7:after {
      width: 0%;
      height: 2px;
    }
    .btn-7:hover{
      background: transparent;
    }
    .btn-7:hover:before {
      height: 100%;
    }
    .btn-7:hover:after {
      width: 100%;
    }
    .btn-7 span:before,
    .btn-7 span:after {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      background: rgba(251,75,2,1);
      box-shadow:
       -7px -7px 20px 0px rgba(255,255,255,.9),
       -4px -4px 5px 0px rgba(255,255,255,.9),
       7px 7px 20px 0px rgba(0,0,0,.2),
       4px 4px 5px 0px rgba(0,0,0,.3);
      transition: all 0.3s ease;
    }
    .btn-7 span:before {
      width: 2px;
      height: 0%;
    }
    .btn-7 span:after {
      height: 2px;
      width: 0%;
    }
    .btn-7 span:hover:before {
      height: 100%;
    }
    .btn-7 span:hover:after {
      width: 100%;
    }

/* btn-10 */
    .btn-10 {
        color: #ffe601;
        background: rgb(22,9,240);
      background: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%);
        border: none;
        transition: all 0.3s ease;
        overflow: hidden;
      }
      .btn-10:after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        transition: all 0.3s ease;
        -webkit-transform: scale(.1);
        transform: scale(.1);
      }
      .btn-10:hover {
        color: #a30180;
        border: none;
        background: transparent;
      }
      .btn-10:hover:after {
        color: #e7eb03;
      background: linear-gradient(0deg, rgb(2, 60, 251) 0%,  rgb(238, 203, 6)100%);
        -webkit-transform: scale(1);
        transform: scale(1);
      }

.btn-15 {
        background: #b621fe;
        border: none;
        z-index: 1;
      }
      .btn-15:after {
        position: absolute;
        content: "";
        width: 0;
        height: 100%;
        top: 0;
        right: 0;
        z-index: -1;
        background-color: #9186b6;
        border-radius: 25px;
        box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
         7px 7px 20px 0px rgba(0,0,0,.1),
         4px 4px 5px 0px rgba(0,0,0,.1);
        transition: all 0.3s ease;
      }
      .btn-15:hover {
      }
      .btn-15:hover:after {
        left: 0;
        width: 100%;
      }
      .btn-15:active {
        top: 2px;
      }
/*       btn-17 */
      /* .btn-17 {
        background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);
          line-height: 42px;
          padding: 0;
          border: none;
        }
        .btn-17 span {
          position: relative;
          display: block;
          width: 100%;
          height: 100%;
        }
        .btn-17:before,
        .btn-17:after {
          position: absolute;
          content: "";
          right: 0;
          bottom: 0;
          background: rgba(251,75,2,1);
          box-shadow:
           -7px -7px 20px 0px rgba(255,255,255,.9),
           -4px -4px 5px 0px rgba(255,255,255,.9),
           7px 7px 20px 0px rgba(0,0,0,.2),
           4px 4px 5px 0px rgba(0,0,0,.3);
          transition: all 0.3s ease;
        }
        .btn-17:before{
           height: 0%;
           width: 2px;
        }
        .btn-17:after {
          width: 0%;
          height: 2px;
        }
        .btn-17:hover{
          color: rgba(251,75,2,1);
          background: transparent;
        }
        .btn-17:hover:before {
          height: 100%;
        }
        .btn-17:hover:after {
          width: 100%;
        }
        .btn-17 span:before,
        .btn-17 span:after {
          position: absolute;
          content: "";
          left: 0;
          top: 0;
          background: rgba(251,75,2,1);
          box-shadow:
           -7px -7px 20px 0px rgba(255,255,255,.9),
           -4px -4px 5px 0px rgba(255,255,255,.9),
           7px 7px 20px 0px rgba(0,0,0,.2),
           4px 4px 5px 0px rgba(0,0,0,.3);
          transition: all 0.3s ease;
        }
        .btn-17 span:before {
          width: 2px;
          height: 0%;
        }
        .btn-17 span:after {
          height: 2px;
          width: 0%;
        }
        .btn-17 span:hover:before {
          height: 100%;
        }
        .btn-17 span:hover:after {
          width: 100%;
        } */

.btn-17 {
          /* margin: 0;
          padding: 0; */
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          gap: 120px;
          background: #FFD700;
          position: relative;
          padding: 16px 30px;
          font-size: 1.5rem;
          color: var(--color);
          border: 2px solid rgba(3, 58, 161, 0.5);
          border-radius: 20px;
          text-shadow: 0 0 15px var(--color);
          text-decoration: none;
          text-transform: uppercase;
          letter-spacing: 0.1rem;
          transition: 0.5s;
          z-index: 1;
        }

.btn-17:hover {
  color: #058d0c;
  border: 2px solid rgba(139, 163, 1, 0);
  box-shadow: 0 0 0px var(--color);
}

.btn-17::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color);
  z-index: -1;
  transform: scale(0);
  transition: 0.5s;
}

.btn-17:hover::before {
  transform: scale(1);
  transition-delay: 0.5s;
  box-shadow: 0 0 10px var(--color),
    0 0 30px var(--color),
    0 0 60px var(--color);
}

.btn-17 span {
  position: absolute;
  background: var(--color);
  pointer-events: none;
  border-radius: 2px;
  box-shadow: 0 0 10px var(--color),
    0 0 20px var(--color),
    0 0 30px var(--color),
    0 0 50px var(--color),
    0 0 100px var(--color);
  transition: 0.5s ease-in-out;
  transition-delay: 0.25s;
}

.btn-17:hover span {
  opacity: 0;
  transition-delay: 0s;
}

.btn-17 span:nth-child(1),
.btn-17 span:nth-child(3) {
  width: 40px;
  height: 4px;
}

.btn-17:hover span:nth-child(1),
.btn-17:hover span:nth-child(3) {
  transform: translateX(0);
}

.btn-17 span:nth-child(2),
.btn-17 span:nth-child(4) {
  width: 4px;
  height: 40px;
}

.btn-17:hover span:nth-child(1),
.btn-17:hover span:nth-child(3) {
  transform: translateY(0);
}

.btn-17 span:nth-child(1) {
  top: calc(50% - 2px);
  left: -50px;
  transform-origin: left;
}

.btn-17:hover span:nth-child(1) {
  left: 50%;
}

.btn-17 span:nth-child(3) {
  top: calc(50% - 2px);
  right: -50px;
  transform-origin: right;
}

.btn-17:hover span:nth-child(3) {
  right: 50%;
}

.btn-17 span:nth-child(2) {
  left: calc(50% - 2px);
  top: -50px;
  transform-origin: top;
}

.btn-17:hover span:nth-child(2) {
  top: 50%;
}

.btn-17 span:nth-child(4) {
  left: calc(50% - 2px);
  bottom: -50px;
  transform-origin: bottom;
}

.btn-17:hover span:nth-child(4 ) {
  bottom: 50%;
}

/* btn-16 https://codepen.io/Ks145/pen/MWGxbYr */
        .btn-16 {
          --glow-color: hsl(250, 23%, 60%);

width: 380px;
         height: 80px;
          /* height: 100%;
          width: auto; */
          overflow: hidden;
        }

.btn-16::before,::after {
  box-sizing: border-box;
}

.btn-16 {
          position: relative;
          color: var(--glow-color);
          cursor: pointer;
          padding: 0.35em 1em;
          border: 0.15em solid var(--glow-color);
          border-radius: 0.75em;
          background: none;
          perspective: 2em;
          font-family: "Raleway", sans-serif;
          font-size: 1.3em;
          font-weight: 900;
          letter-spacing: 1em;
        
          -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
            0px 0px 0.5em 0px var(--glow-color);
          -moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
            0px 0px 0.5em 0px var(--glow-color);
          box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
            0px 0px 0.5em 0px var(--glow-color);
          animation: border-flicker 2s linear infinite;
        }
        .glowing-txt {
          float: left;
          margin: 5%;
          margin-left: 3.8em;
          -webkit-text-shadow: 0 0 0.125em hsla(0, 31%, 54%, 0.3),
            0 0 0.45em var(--glow-color);
          -moz-text-shadow: 0 0 0.125em hsla(59, 98%, 39%, 0.3),
            0 0 0.45em var(--glow-color);
          text-shadow: 0 0 0.125em hsla(59, 96%, 28%, 0.3), 0 0 0.45em var(--glow-color);
          animation: text-flicker 3s linear infinite;
        }
        
        .faulty-letter {
          opacity: 0.5;
          animation: faulty-flicker 3s linear infinite;
        }
        
        .btn-16::before {
          content: "";
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          opacity: 0.7;
          filter: blur(1em);
          transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
          background: var(--glow-color);
          pointer-events: none;
        }
        
        .btn-16::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          opacity: 0;
          z-index: -1;
          background-color: var(--glow-color);
          box-shadow: 0 0 2em 0.2em var(--glow-color);
          transition: opacity 100ms linear;
        }
        
        .btn-16:hover {
          /* color: rgba(5, 189, 29, 0.8); */
          text-shadow: none;
          animation: none;
        }
        
        .btn-16:hover .glowing-txt {
          animation: none;
        }
        
        .btn-16:hover .faulty-letter {
          animation: none;
          text-shadow: none;
          opacity: 1;
        }
        
        .btn-16:hover:before {
          filter: blur(1.5em);
          opacity: 1;
        }
        
        .btn-16:hover:after {
          opacity: 1;
        }
        
        @keyframes faulty-flicker {
          0% {
            opacity: 0.1;
          }
          2% {
            opacity: 0.1;
          }
          4% {
            opacity: 0.5;
          }
          19% {
            opacity: 0.5;
          }
          21% {
            opacity: 0.1;
          }
          23% {
            opacity: 1;
          }
          80% {
            opacity: 0.5;
          }
          83% {
            opacity: 0.4;
          }
        
          87% {
            opacity: 1;
          }
        }
        
        @keyframes text-flicker {
          0% {
            opacity: 0.1;
          }
        
          2% {
            opacity: 1;
          }
        
          8% {
            opacity: 0.1;
          }
        
          9% {
            opacity: 1;
          }
        
          12% {
            opacity: 0.1;
          }
          20% {
            opacity: 1;
          }
          25% {
            opacity: 0.3;
          }
          30% {
            opacity: 1;
          }
        
          70% {
            opacity: 0.7;
          }
          72% {
            opacity: 0.2;
          }
        
          77% {
            opacity: 0.9;
          }
          100% {
            opacity: 0.9;
          }
        }
        
        @keyframes border-flicker {
          0% {
            opacity: 0.1;
          }
          2% {
            opacity: 1;
          }
          4% {
            opacity: 0.1;
          }
        
          8% {
            opacity: 1;
          }
          70% {
            opacity: 0.7;
          }
          100% {
            opacity: 1;
          }
        }
        
        @media only screen and (max-width: 600px) {
          .btn-16{
            font-size: 1em;
          }
        }

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground