Прайсы с 3D кнопками / Прайсы / Сниппеты Bootstrap

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

Категория: Прайсы

Для Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 1.9 Kb

Уникальный ID: 3409

Количество символов:

Посмотрели: 1822 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-3409-20

Скачали бесплатно: 87 раз

Прокомментировали: 0 раз

Рейтинг: 3.4 / 5 - 27 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

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

Информация: Правообладателям

Теги: прайсы, bootstrap 3, Price, 3D, Pricing

Поделился: BootstrapТема

Добавлено: 2019-04-03 в 10:31

Метка: 1554276710

⇄ ⇅

}
.flip-front{
 top:0;
 background-color: #313131;
 color:#fff;
 -webkit-transform: rotateX(0deg) translateZ(25px);
 -ms-transform: rotateX(0deg) translateZ(25px);
 -o-transform: rotateX(0deg) translateZ(25px);
 transform: rotateX(0deg) translateZ(25px);
}
.flip-back{
 background-color: #fff;
 color: #000;
 -webkit-transform: rotateX(90deg) translateZ(25px);
 -ms-transform: rotateX(90deg) translateZ(25px);
 -o-transform: rotateX(90deg) translateZ(25px);
 transform: rotateX(90deg) translateZ(25px);
}
.btn:hover .flip-back{
 -webkit-transform: rotateX(0deg) translateZ(25px);
 -ms-transform: rotateX(0deg) translateZ(25px);
 -o-transform: rotateX(0deg) translateZ(25px);
 transform: rotateX(0deg) translateZ(25px);
}
.btn:hover .flip-front{
 -webkit-transform: rotateX(-90deg) translateZ(25px);
 -ms-transform: rotateX(-90deg) translateZ(25px);
 -o-transform: rotateX(-90deg) translateZ(25px);
 transform: rotateX(-90deg) translateZ(25px);
}
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus{
 outline: none;
 -webkit-box-shadow:none;
 box-shadow: none;
 color: #fff;
}
.btn-yellow{
 background-color: transparent;
}
.btn-yellow .flip-front{
 color: #313131;
 background-color: #dda01f;
}
.btn-b-dark .flip-front{
 padding-top: 17px;
 background-color: transparent;
 border:2px solid #313131;
 color: #313131;
}
.btn-b-dark .flip-back{
 background-color: #313131;
 color: #fff;
}
</style>

<div class="container">
<div class="section-body">
<div class="row-base row text-center">
<div class="col-price col-base col-sm-6 col-md-3">
<div class="price-table">
<div class="price-header">
<h3 class="price-title">Professional plan</h3>
<p class="price-type">For super professional</p>
</div>
<div class="price">
<div class="price-amount">$10<sub>.99</sub></div>
<div class="price-period">per month</div>
</div>
<div class="price-body">
<ul class="price-features">
<li><strong>Full</strong> Access</li>
<li><strong>100</strong> Users Acounts</li>
<li><strong>10Gb</strong> Space</li>
<li><strong>1 year</strong> License</li>
<li>Phone & Email Support</li>
</ul>
<div class="price-footer">
<a href="#" class="btn btn-b-dark">
<span class="text">Buy now</span>
<span class="flip-front">Buy now</span>
<span class="flip-back">Buy now</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-price col-base col-sm-6 col-md-3">
<div class="price-table">
<div class="price-header">
<h3 class="price-title">Business plan</h3>
<p class="price-type">For business</p>
</div>
<div class="price">
<div class="price-amount">$20<sub>.99</sub></div>
<div class="price-period">per month</div>
</div>
<div class="price-body">
<ul class="price-features">
<li><strong>Full</strong> Access</li>
<li><strong>400</strong> Users Acounts</li>
<li><strong>50Gb</strong> Space</li>
<li><strong>1 year</strong> License</li>
<li>Phone & Email Support</li>
</ul>
<div class="price-footer">
<a href="#" class="btn btn-b-dark">
<span class="text">Buy now</span>
<span class="flip-front">Buy now</span>
<span class="flip-back">Buy now</span>
</a>
</div>
</div>
</div>
</div>
<div class="leading col-price col-base col-sm-6 col-md-3 wow flipInY">
<div class="price-table">
<div class="price-header">
<h3 class="price-title">Enterprise plan</h3>
<p class="price-type">Our best selling plan</p>
</div>
<div class="price">
<div class="price-amount">$30<sub>.99</sub></div>
<div class="price-period">per month</div>
</div>
<div class="price-body">
<ul class="price-features">
<li><strong>Full</strong> Access</li>
<li><strong>700</strong> Users Acounts</li>
<li><strong>Unlimited Gb</strong> Space</li>
<li><strong>5 year</strong> License</li>
<li>Phone & Email Support</li>
</ul>
<div class="price-footer">
<a href="#" class="btn btn-yellow">
<span class="text">Buy now</span>
<span class="flip-front">Buy now</span>
<span class="flip-back">Buy now</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-price col-base col-sm-6 col-md-3">
<div class="price-table">
<div class="price-header">
<h3 class="price-title">Enterprice Pro Plus</h3>
<p class="price-type">For corporate and Man / Faters</p>
</div>
<div class="price">
<div class="price-amount">$40<sub>.99</sub></div>
<div class="price-period">per month</div>
</div>
<div class="price-body">
<ul class="price-features">
<li><strong>Full</strong> Access</li>
<li><strong>Unlimited</strong> Users Acounts</li>
<li><strong>Unlimited</strong> Space</li>
<li><strong>10 year</strong> License</li>
<li>Phone & Email Support</li>
</ul>
<div class="price-footer">
<a href="#" class="btn btn-b-dark">
<span class="text">Buy now</span>
<span class="flip-front">Buy now</span>
<span class="flip-back">Buy now</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

BootstrapTema

Прайсы с 3D кнопками

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0