Таблица цен с переключателем

Таблица цен — самый простой способ поделиться информацией с потенциальными клиентами и объяснить различия в ваших тарифных планах. В этом уроке приведено решение для создания таблицы цен с переключателем на чистом CSS, с помощью которого в одном блоке можно отобразить преимущества годовой оплаты по сравнению с ежемесячной.

Перейти на страницу с примером

Радио-кнопка <input type="radio"> позволяет выбрать одно значение из нескольких. Переключить состояние можно не только с помощью элемента <input>, но и с помощью связанного с ним <label>. Когда радио-кнопка нажата, с помощью псевдокласса :checked и сестринских селекторов + и ~ можно задать поведение нижестоящих элементов, когда отжата — вернуть их в исходное состояние.

<div class="tabs">
   <input id="tab1" type="radio" name="tabs" checked>
   <label for="tab1">Оплата месяц</label>
   <input id="tab2" type="radio" name="tabs" >
   <label for="tab2">Оплата год</label>
   <span class="switch"></span>

   <section id="content1">
      <div class="pricing-wrapper">
         <div class="pricing-tables">
            <div class="pricing-item">
               <div class="item-inner">
                  <div class="item-header">
                     <div class="title">
                        <b>Статичный сайт</b>
                        <span>Выбор пользователей</span>
                     </div>
                     <div class="price">
                        <b>99 ₽</b><span>в месяц</span>
                     </div>
                  </div>
                  <ul class="features">
                     <li>1.5 ГБ SSD</li>
                     <li>1 сайт</li>
                     <li>Без PHP и БД</li>
                  </ul>
                  <a href="" class="pricing-button">Выбрать</a>
               </div>
            </div>
            <div class="pricing-item">
               <div class="item-inner">
                  <div class="item-header">
                     <div class="title">
                        <b>Быстрый сайт</b>
                        <span>Оптимальный выбор</span>
                     </div>
                     <div class="price">
                        <b>159 ₽</b><span>в месяц</span>
                     </div>
                  </div>
                  <ul class="features">
                     <li>7 ГБ SSD</li>
                     <li>1 сайт</li>
                     <li>1 база данных</li>
                  </ul>
                  <a href="" class="pricing-button">Выбрать</a>
               </div>
            </div>
            <div class="pricing-item">
               <div class="item-inner">
                  <div class="item-header">
                     <div class="title">
                        <b>5 быстрых сайтов</b>
                        <span>Лучшее предложение</span>
                     </div>
                     <div class="price">
                        <b>199 ₽</b><span>в месяц</span>
                     </div>
                  </div>
                  <ul class="features">
                     <li>10 ГБ SSD</li>
                     <li>5 сайт</li>
                     <li>5 баз данных</li>
                  </ul>
                  <a href="" class="pricing-button">Выбрать</a>
               </div>
            </div>
         </div>
      </div>
   </section>

   <section id="content2">
      <div class="pricing-wrapper">
         <div class="pricing-tables">
            <div class="pricing-item">
               <div class="item-inner">
                  <div class="item-header">
                     <div class="title">
                        <b>Статичный сайт</b>
                        <span>Выбор пользователей</span>
                     </div>
                     <div class="price">
                        <b>79 ₽</b><span>в месяц</span>
                     </div>
                  </div>
                  <ul class="features">
                     <li>1.5 ГБ SSD</li>
                     <li>1 сайт</li>
                     <li>Без PHP и БД</li>
                  </ul>
                  <a href="" class="pricing-button">Выбрать</a>
               </div>
            </div>
            <div class="pricing-item">
               <div class="item-inner">
                  <div class="item-header">
                     <div class="title">
                        <b>Быстрый сайт</b>
                        <span>Оптимальный выбор</span>
                     </div>
                     <div class="price">
                        <b>139 ₽</b><span>в месяц</span>
                     </div>
                  </div>
                  <ul class="features">
                     <li>7 ГБ SSD</li>
                     <li>1 сайт</li>
                     <li>1 база данных</li>
                  </ul>
                  <a href="" class="pricing-button">Выбрать</a>
               </div>
            </div>
            <div class="pricing-item">
               <div class="item-inner">
                  <div class="item-header">
                     <div class="title">
                        <b>5 быстрых сайтов</b>
                        <span>Лучшее предложение</span>
                     </div>
                     <div class="price">
                        <b>149 ₽</b><span>месяц</span>
                     </div>
                  </div>
                  <ul class="features">
                     <li>10 ГБ SSD</li>
                     <li>5 сайт</li>
                     <li>5 баз данных</li>
                  </ul>
                  <a href="" class="pricing-button">Выбрать</a>
               </div>
            </div>
         </div>
      </div>
   </section>
</div>

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@400;500&display=swap');

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   background: #EFF7FE;
   color: #080515;
   font-family: 'Noto Sans Display', sans-serif;
   line-height: 1;
}

.tabs {
   position: relative;
   text-align: center;
}

.tabs input[type=radio] {
   display: none;
}

.tabs label {
   position: relative;
   z-index: 1;
   display: inline-block;
   width: 130px;
   height: 30px;
   line-height: 30px;
   color: white;
   font-size: 14px;
   cursor: pointer;
}

.switch {
   position: absolute;
   top: 0;
   left: 50%;
   height: 30px;
   width: 130px;
   background: #251349;
   border-radius: 40px;
   transform: translateX(-130px);
   transition: transform .5s;
}

.tabs section {
   display: none;
   padding: 40px 0 0;
   animation: scale .7s ease-in-out;
}

@keyframes scale {
   0% {
      transform: scale(0.9);
      opacity: 0;
   }

   50% {
      transform: scale(1.01);
      opacity: 0.5;
   }

   100% {
      transform: scale(1);
      opacity: 1;
   }
}

.tabs #tab1:checked~#content1,
.tabs #tab2:checked~#content2 {
   display: block;
}

.tabs input[type=radio]:checked+label+.switch {
   color: white;
}

.tabs input[type=radio]:not(:checked)+label {
   color: #080515;
}

.tabs input[type="radio"]:checked+label+.switch,
.tabs input[type="radio"]:checked+label:nth-of-type(n)+.switch {
   transform: translateX(0);
}

.item-inner {
   padding: 30px 20px;
   border-radius: 10px;
   background: white;
   box-shadow: 0 2px 40px rgba(47, 43, 50, .2);
}

.pricing-tables .pricing-item:nth-child(2) .item-inner {
   background: #251349;
   color: white;
}

.item-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   text-align: left;
   padding-bottom: 20px;
   margin-bottom: 20px;
   border-bottom: 1px solid #D7D9DB;
}

.title *,
.price * {
   display: block;
}

.title b,
.price b {
   font-size: 18px;
   margin-bottom: 8px;
   font-weight: 500;
}

.title span,
.price span {
   font-size: 12px;
   color: #9c9ba1;
}

.price {
   padding: 8px 10px;
   border-radius: 6px;
   background: #EFF7FE;
}

.pricing-tables .pricing-item:nth-child(2) .item-header {
   border-bottom: 1px solid #222A3E;
}

.pricing-tables .pricing-item:nth-child(2) .price {
   background: #3F286B;
}

.pricing-tables .pricing-item:nth-child(2) .price span {
   color: rgba(255, 255, 255, 0.4);
}

.features {
   list-style: none;
   text-align: left;
   margin-bottom: 30px;
}

.features li {
   margin-bottom: 10px;
   font-size: 14px;
}

.features li:before {
   content: "\e87f";
   display: inline-block;
   font-family: Linearicons-Free;
   speak: none;
   font-style: normal;
   font-weight: 400;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   margin-right: 5px;
}

.pricing-button {
   text-decoration: none;
   background: #FF7556;
   display: block;
   font-size: 14px;
   color: white;
   height: 46px;
   line-height: 46px;
   border-radius: 6px;
   text-align: center;
   transition: .3s linear;
}

.pricing-button:hover {
   background: #cc2500;
}

@media(max-width:959px) {
   .pricing-item {
      width: 350px;
      margin: 0 auto 40px;
   }
}

@media(min-width:960px) {
   .tabs section {
      padding: 50px 0 40px;
   }

   .pricing-tables {
      display: flex;
      margin: 0 -10px;
   }

   .pricing-item {
      width: 33.333333333%;
      padding: 0 10px;
   }
}

@media(min-width:1120px) {
   .pricing-wrapper {
      width: 100%;
      max-width: 1060px;
      margin: 0 auto;
   }
}