纯CSS3制作漂亮的价格表
阅读目录
阐述demo1style.css
demo2style2.css
阐述
网页上发布产品时，一般都有几套价格方案，通常我们将几套方案放在一起，用户可以相互比较决定购买哪个套餐。
最常见的是主机商发布产品价格信息页，本文结合实例给大家分享以纯CSS+HTML实现的价格表。
demo1
style.css
html,html a {
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
#plans,#plans ul,#plans ul li {
margin: 0;
padding: 0;
list-style: none;
}
#pricePlans:after {
content: '';
display: table;
clear: both;
}
#pricePlans {
zoom: 1;
}
#pricePlans {
max-width: 69em;
margin: 2em auto;
}
#pricePlans #plans .plan {
background: #fff;
float: left;
text-align: center;
border-radius: 5px;
border:1px solid #d3d3d3;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
width: 23%;
margin: 0 1.33% 20px 0;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-ms-transition: all .25s;
-o-transition: all .25s;
transition: all .25s;
}
#pricePlans #plans .plan:hover {
-webkit-transform: scale(1.04);
-moz-transform: scale(1.04);
-ms-transform: scale(1.04);
-o-transform: scale(1.04);
transform: scale(1.04);
}
.planContainer .title h2 {
font-size: 2.125em;
font-weight: 300;
color: #3e4f6a;
margin: 0;
padding: .6em 0;
}
.planContainer .title h2.bestPlanTitle {
background: #3e4f6a;
background: -webkit-linear-gradient(top, #475975, #364761);
background: -moz-linear-gradient(top, #475975, #364761);
background: -o-linear-gradient(top, #475975, #364761);
background: -ms-linear-gradient(top, #475975, #364761);
background: linear-gradient(top, #475975, #364761);
color: #fff;
border-radius: 5px 5px 0 0;
}
.planContainer .price p {
background: #3e4f6a;
background: -webkit-linear-gradient(top, #475975, #364761);
background: -moz-linear-gradient(top, #475975, #364761);
background: -o-linear-gradient(top, #475975, #364761);
background: -ms-linear-gradient(top, #475975, #364761);
background: linear-gradient(top, #475975, #364761);
color: #fff;
font-size: 1.2em;
font-weight: 700;
height: 2.6em;
line-height: 2.6em;
margin: 0 0 1em;
}
.planContainer .price p.bestPlanPrice {
background: #f7814d;
}
.planContainer .price p span {
color: #8394ae;
}
.planContainer .options {
margin-top: 10em;
}
.planContainer .options li {
font-weight: 700;
color: #364762;
line-height: 2.5;
}
.planContainer .options li span {
font-weight: 400;
color: #979797;
}
.planContainer .button a {
text-transform: uppercase;
text-decoration: none;
color: #3e4f6a;
font-weight: 700;
letter-spacing: 3px;
line-height: 2.8em;
border: 2px solid #3e4f6a;
display: inline-block;
width: 80%;
height: 2.8em;
border-radius: 4px;
margin: 1.5em 0 1.8em;
-webkit-transition: all .25s;
-moz-transition: all .25s;
-ms-transition: all .25s;
-o-transition: all .25s;
transition: all .25s;
}
.planContainer .button a.bestPlanButton {
color: #fff;
background: #f7814d;
border: 2px solid #f7814d;
}
#pricePlans #plans > li:last-child {
margin-right: 0;
}
.planContainer .button a {
}
.planContainer .button a:hover {
background: #3e4f6a;
color: #fff;
}
.planContainer .button a.bestPlanButton:hover {
background: #ff9c70;
border: 2px solid #ff9c70;
}
demo2
HTML+CSS实现漂亮的价格表
New
入门型
￥149/ 月
小型企业、个人首选
双核至强处理器
1G DDR3 ECC
高速纠错内存
10G + 20G
高速企业级硬盘
1M 专线带宽
1个 独立公网IP
进阶型
￥199/ 月
小型企业、个人首选
双核至强处理器
2G DDR3 ECC
高速纠错内存
10G + 40G
高速企业级硬盘
2M 专线带宽
1个 独立公网IP
Best
尊贵型
￥349/ 月
中型企业、个人首选
四核至强处理器
4G DDR3 ECC
高速纠错内存
10G + 60G
高速企业级硬盘
2M 专线带宽
1个 独立公网IP
至尊型
￥649/ 月
大型企业、个人首选
四核至强处理器
8G DDR3 ECC
高速纠错内存
10G + 80G
高速企业级硬盘
2M 专线带宽
1个 独立公网IP
style2.css
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */html {
font-family:sans-serif;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%
}
body {
margin:0
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
display:block
}
audio,canvas,progress,video {
display:inline-block;
vertical-align:baseline
}
audio:not([controls]) {
display:none;
height:0
}
[hidden],template {
display:none
}
a {
background:0 0
}
a:active,a:hover {
outline:0
}
abbr[title] {
border-bottom:1px dotted
}
b,strong {
font-weight:700
}
dfn {
font-style:italic
}
h1 {
font-size:2em;
margin:.67em 0
}
mark {
background:#ff0;
color:#000
}
small {
font-size:80%
}
sub,sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline
}
sup {
top:-.5em
}
sub {
bottom:-.25em
}
img {
border:0
}
svg:not(:root) {
overflow:hidden
}
figure {
margin:1em 40px
}
hr {
-moz-box-sizing:content-box;
box-sizing:content-box;
height:0
}
pre {
overflow:auto
}
code,kbd,pre,samp {
font-family:monospace,monospace;
font-size:1em
}
button,input,optgroup,select,textarea {
color:inherit;
font:inherit;
margin:0
}
button {
overflow:visible
}
button,select {
text-transform:none
}
button,html input[type=button],input[type=reset],input[type=submit] {
-webkit-appearance:button;
cursor:pointer
}
button[disabled],html input[disabled] {
cursor:default
}
button::-moz-focus-inner,input::-moz-focus-inner {
border:0;
padding:0
}
input {
line-height:normal
}
input[type=checkbox],input[type=radio] {
box-sizing:border-box;
padding:0
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
height:auto
}
input[type=search] {
-webkit-appearance:textfield;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box
}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
-webkit-appearance:none
}
fieldset {
border:1px solid silver;
margin:0 2px;
padding:.35em .625em .75em
}
legend {
border:0;
padding:0
}
textarea {
overflow:auto
}
optgroup {
font-weight:700
}
table {
border-collapse:collapse;
border-spacing:0
}
td,th {
padding:0
}
.row {
margin-left:-15px;
margin-right:-15px
}
.col-xs-1,.col-sm-1,.col-md-1,.col-lg-1,.col-xs-2,.col-sm-2,.col-md-2,.col-lg-2,.col-xs-3,.col-sm-3,.col-md-3,.col-lg-3,.col-xs-4,.col-sm-4,.col-md-4,.col-lg-4,.col-xs-5,.col-sm-5,.col-md-5,.col-lg-5,.col-xs-6,.col-sm-6,.col-md-6,.col-lg-6,.col-xs-7,.col-sm-7,.col-md-7,.col-lg-7,.col-xs-8,.col-sm-8,.col-md-8,.col-lg-8,.col-xs-9,.col-sm-9,.col-md-9,.col-lg-9,.col-xs-10,.col-sm-10,.col-md-10,.col-lg-10,.col-xs-11,.col-sm-11,.col-md-11,.col-lg-11,.col-xs-12,.col-sm-12,.col-md-12,.col-lg-12 {
position:relative;
min-height:1px;
padding-left:15px;
padding-right:15px
}
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 {
float:left
}
.col-xs-12 {
width:100%
}
.col-xs-11 {
width:91.66666667%
}
.col-xs-10 {
width:83.33333333%
}
.col-xs-9 {
width:75%
}
.col-xs-8 {
width:66.66666667%
}
.col-xs-7 {
width:58.33333333%
}
.col-xs-6 {
width:50%
}
.col-xs-5 {
width:41.66666667%
}
.col-xs-4 {
width:33.33333333%
}
.col-xs-3 {
width:25%
}
.col-xs-2 {
width:16.66666667%
}
.col-xs-1 {
width:8.33333333%
}
@media (min-width:768px) {
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 {
float:left
}
.col-sm-12 {
width:100%
}
.col-sm-11 {
width:91.66666667%
}
.col-sm-10 {
width:83.33333333%
}
.col-sm-9 {
width:75%
}
.col-sm-8 {
width:66.66666667%
}
.col-sm-7 {
width:58.33333333%
}
.col-sm-6 {
width:50%
}
.col-sm-5 {
width:41.66666667%
}
.col-sm-4 {
width:33.33333333%
}
.col-sm-3 {
width:25%
}
.col-sm-2 {
width:16.66666667%
}
.col-sm-1 {
width:8.33333333%
}
}@media (min-width:992px) {
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12 {
float:left
}
.col-md-12 {
width:100%
}
.col-md-11 {
width:91.66666667%
}
.col-md-10 {
width:83.33333333%
}
.col-md-9 {
width:75%
}
.col-md-8 {
width:66.66666667%
}
.col-md-7 {
width:58.33333333%
}
.col-md-6 {
width:50%
}
.col-md-5 {
width:41.66666667%
}
.col-md-4 {
width:33.33333333%
}
.col-md-3 {
width:21.6%
}
.col-md-2 {
width:16.66666667%
}
.col-md-1 {
width:8.33333333%
}
}@media (min-width:1200px) {
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12 {
float:left
}
.col-lg-12 {
width:100%
}
.col-lg-11 {
width:91.66666667%
}
.col-lg-10 {
width:83.33333333%
}
.col-lg-9 {
width:75%
}
.col-lg-8 {
width:66.66666667%
}
.col-lg-7 {
width:58.33333333%
}
.col-lg-6 {
width:50%
}
.col-lg-5 {
width:41.66666667%
}
.col-lg-4 {
width:33.33333333%
}
.col-lg-3 {
width:25%
}
.col-lg-2 {
width:16.66666667%
}
.col-lg-1 {
width:8.33333333%
}
}
.row:before,.row:after {
content:" ";
display:table
}
.row:after {
clear:both
}
.pt-container {
margin-left:-15px;
margin-right:-15px
}
.pt-container:before,.pt-container:after {
content:" ";
display:table
}
.pt-container:after {
clear:both
}
@media (min-width:992px) {
.pt-container {
margin-bottom:100px;
border:1px solid #e7e8e8
}
}.pricing-table {
margin-bottom:30px;
background-color:#fff;
border:1px solid #d0d0d0;
line-height:1.5;
overflow:hidden;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out
}
@media (min-width:992px) {
.pricing-table {
margin:0 -15px
}
}.pricing-table.active {
z-index:2;
border:2px solid #8ab71b;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out
}
@media (min-width:992px) {
.pricing-table.active {
position:absolute;
top:-22px;
width:100%
}
}.pricing-table.active .pt-title {
background-color:#fbfbfb
}
@media (min-width:992px) {
.pricing-table.active .pt-title {
padding-top:40px
}
}.pricing-table.active .pt-footer {
background-color:transparent
}
@media (min-width:992px) {
.pricing-table.active .pt-ribbon-wrapper {
width:115px;
height:115px
}
.pricing-table.active .pt-ribbon-wrapper .pt-ribbon {
top:11px;
left:-12px
}
}@media (min-width:992px) {
.pricing-table.active:hover {
-webkit-transform:translate(0,-5px);
-ms-transform:translate(0,-5px);
transform:translate(0,-5px)
}
}.pricing-table:hover {
border-color:#8ab71b
}
.pricing-table:hover .pt-title {
color:#fff;
background-color:#8ab71b
}
.pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#8ab71b
}
.pt-header {
position:relative;
background-color:#fff;
text-align:center
}
.pt-header .pt-ribbon-wrapper {
position:absolute;
top:0;
right:0;
overflow:hidden;
width:80px;
height:80px
}
.pt-header .pt-ribbon-wrapper .pt-ribbon {
position:relative;
height:40px;
top:0;
left:-32px;
width:180px;
background-color:#8ab71b;
color:#fff;
font-size:14px;
font-weight:400;
text-transform:uppercase;
line-height:40px;
-webkit-transform:rotate(40deg);
-ms-transform:rotate(40deg);
transform:rotate(40deg)
}
.pt-header .pt-title {
margin:0;
padding:20px 0;
background-color:#fbfbfb;
color:#505050;
font-size:18px;
text-transform:uppercase;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out
}
.pt-header .pt-price {
margin:0;
padding:15px 0;
font-family:Georgia,sans-serif;
color:#505050;
font-size:48px
}
.pt-header .pt-price .pt-currency {
color:#505050;
font-size:24px;
font-weight:400
}
.pt-header .pt-price .pt-per {
position:relative;
top:2px;
left:8px;
color:#909090;
font-size:16px;
font-weight:400;
text-transform:lowercase
}
.pt-header .pt-description {
margin:0 0 20px;
padding:0 30px;
color:#505050;
font-weight:700
}
.pt-body {
padding:0 30px;
background-color:#fff;
font-size:16px;
color:#505050;
text-align:center
}
.pt-body.striped .pt-row:nth-child(2n-1) {
background-color:#fbfbfb
}
.pt-body.hover .pt-row {
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out
}
.pt-body.hover .pt-row:hover {
background-color:#fbfbfb;
color:#505050;
font-weight:400
}
.pt-body.striped.hover .pt-row:hover {
background-color:#fff
}
.pt-body .pt-row {
padding:15px 0;
background-color:#fff;
border-top:1px dashed #e0e0e0
}
.pt-body .pt-row .pt-row-icon {
font-size:12px;
margin-right:5px
}
.pt-body .pt-row .pt-row-icon.ok {
color:#80a32d
}
.pt-body .pt-row .pt-row-icon.remove {
color:#e66946
}
.pt-footer {
padding:30px 50px;
background-color:transparent
}
.pt-footer .pt-button {
background-color:#8ab71b;
border:2px solid #8ab71b;
color:#fff;
text-align:center;
font-size:16px;
text-decoration:none;
padding:10px 0;
display:block;
min-width:100%;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out
}
.pt-footer .pt-button.rounded {
border-radius:5px
}
.pt-footer .pt-button.pill {
border-radius:36px
}
.pt-footer .pt-button:hover {
color:#88aa2e;
text-decoration:none;
background-color:transparent;
border:2px solid #8ab71b
}
.blue .pricing-table.active {
border:2px solid #2e3138
}
.blue .pricing-table:hover {
border-color:#2e3138
}
.blue .pricing-table:hover .pt-title {
background-color:#2e3138
}
.blue .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#2e3138
}
.blue .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#2e3138
}
.blue .pt-footer .pt-button {
background-color:#2e3138;
border:2px solid #2e3138
}
.blue .pt-footer .pt-button:hover {
background-color:transparent;
color:#2e3138
}
.pricing-table.blue.active {
border:2px solid #2e3138
}
.pricing-table.blue:hover {
border-color:#2e3138
}
.pricing-table.blue:hover .pt-title {
background-color:#2e3138
}
.pricing-table.blue:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#2e3138
}
.pricing-table.blue .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#2e3138
}
.pricing-table.blue .pt-footer .pt-button {
background-color:#2e3138;
border:2px solid #2e3138
}
.pricing-table.blue .pt-footer .pt-button:hover {
background-color:transparent;
color:#2e3138
}
.pricing-table.blue:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#fff;
color:#2e3138
}
.red .pricing-table.active {
border:2px solid #ee103f
}
.red .pricing-table:hover {
border-color:#ee103f
}
.red .pricing-table:hover .pt-title {
background-color:#ee103f
}
.red .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#ee103f
}
.red .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#ee103f
}
.red .pt-footer .pt-button {
background-color:#ee103f;
border:2px solid #ee103f
}
.red .pt-footer .pt-button:hover {
background-color:transparent;
color:#ee103f
}
.pricing-table.red.active {
border:2px solid #ee103f
}
.pricing-table.red:hover {
border-color:#ee103f
}
.pricing-table.red:hover .pt-title {
background-color:#ee103f
}
.pricing-table.red:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#ee103f
}
.pricing-table.red .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#ee103f
}
.pricing-table.red .pt-footer .pt-button {
background-color:#ee103f;
border:2px solid #ee103f
}
.pricing-table.red .pt-footer .pt-button:hover {
background-color:transparent;
color:#ee103f
}
.pricing-table.red:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#fff;
color:#ee103f
}
.orange .pricing-table.active {
border:2px solid #ee4e10
}
.orange .pricing-table:hover {
border-color:#ee4e10
}
.orange .pricing-table:hover .pt-title {
background-color:#ee4e10
}
.orange .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#ee4e10
}
.orange .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#ee4e10
}
.orange .pt-footer .pt-button {
background-color:#ee4e10;
border:2px solid #ee4e10
}
.orange .pt-footer .pt-button:hover {
background-color:transparent;
color:#ee4e10
}
.pricing-table.orange.active {
border:2px solid #ee4e10
}
.pricing-table.orange:hover {
border-color:#ee4e10
}
.pricing-table.orange:hover .pt-title {
background-color:#ee4e10
}
.pricing-table.orange:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#ee4e10
}
.pricing-table.orange .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#ee4e10
}
.pricing-table.orange .pt-footer .pt-button {
background-color:#ee4e10;
border:2px solid #ee4e10
}
.pricing-table.orange .pt-footer .pt-button:hover {
background-color:transparent;
color:#ee4e10
}
.pricing-table.orange:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#fff;
color:#ee4e10
}
.light-blue .pricing-table.active {
border:2px solid #2aa1d3
}
.light-blue .pricing-table:hover {
border-color:#2aa1d3
}
.light-blue .pricing-table:hover .pt-title {
background-color:#2aa1d3
}
.light-blue .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#2aa1d3
}
.light-blue .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#2aa1d3
}
.light-blue .pt-footer .pt-button {
background-color:#2aa1d3;
border:2px solid #2aa1d3
}
.light-blue .pt-footer .pt-button:hover {
background-color:transparent;
color:#2aa1d3
}
.pricing-table.light-blue.active {
border:2px solid #2aa1d3
}
.pricing-table.light-blue:hover {
border-color:#2aa1d3
}
.pricing-table.light-blue:hover .pt-title {
background-color:#2aa1d3
}
.pricing-table.light-blue:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#2aa1d3
}
.pricing-table.light-blue .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#2aa1d3
}
.pricing-table.light-blue .pt-footer .pt-button {
background-color:#2aa1d3;
border:2px solid #2aa1d3
}
.pricing-table.light-blue .pt-footer .pt-button:hover {
background-color:transparent;
color:#2aa1d3
}
.pricing-table.light-blue:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#fff;
color:#2aa1d3
}
.yellow .pricing-table.active {
border:2px solid #f0b017
}
.yellow .pricing-table:hover {
border-color:#f0b017
}
.yellow .pricing-table:hover .pt-title {
background-color:#f0b017
}
.yellow .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#f0b017
}
.yellow .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#f0b017
}
.yellow .pt-footer .pt-button {
background-color:#f0b017;
border:2px solid #f0b017
}
.yellow .pt-footer .pt-button:hover {
background-color:transparent;
color:#f0b017
}
.pricing-table.yellow.active {
border:2px solid #f0b017
}
.pricing-table.yellow:hover {
border-color:#f0b017
}
.pricing-table.yellow:hover .pt-title {
background-color:#f0b017
}
.pricing-table.yellow:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#f0b017
}
.pricing-table.yellow .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#f0b017
}
.pricing-table.yellow .pt-footer .pt-button {
background-color:#f0b017;
border:2px solid #f0b017
}
.pricing-table.yellow .pt-footer .pt-button:hover {
background-color:transparent;
color:#f0b017
}
.pricing-table.yellow:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#fff;
color:#f0b017
}
.purple .pricing-table.active {
border:2px solid #a84db2
}
.purple .pricing-table:hover {
border-color:#a84db2
}
.purple .pricing-table:hover .pt-title {
background-color:#a84db2
}
.purple .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#a84db2
}
.purple .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#a84db2
}
.purple .pt-footer .pt-button {
background-color:#a84db2;
border:2px solid #a84db2
}
.purple .pt-footer .pt-button:hover {
background-color:transparent;
color:#a84db2
}
.pricing-table.purple.active {
border:2px solid #a84db2
}
.pricing-table.purple:hover {
border-color:#a84db2
}
.pricing-table.purple:hover .pt-title {
background-color:#a84db2
}
.pricing-table.purple:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#a84db2
}
.pricing-table.purple .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#a84db2
}
.pricing-table.purple .pt-footer .pt-button {
background-color:#a84db2;
border:2px solid #a84db2
}
.pricing-table.purple .pt-footer .pt-button:hover {
background-color:transparent;
color:#a84db2
}
.pricing-table.purple:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#fff;
color:#a84db2
}
.brown .pricing-table.active {
border:2px solid #8d512d
}
.brown .pricing-table:hover {
border-color:#8d512d
}
.brown .pricing-table:hover .pt-title {
background-color:#8d512d
}
.brown .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#8d512d
}
.brown .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#8d512d
}
.brown .pt-footer .pt-button {
background-color:#8d512d;
border:2px solid #8d512d
}
.brown .pt-footer .pt-button:hover {
background-color:transparent;
color:#8d512d
}
.pricing-table.brown.active {
border:2px solid #8d512d
}
.pricing-table.brown:hover {
border-color:#8d512d
}
.pricing-table.brown:hover .pt-title {
background-color:#8d512d
}
.pricing-table.brown:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#8d512d
}
.pricing-table.brown .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#8d512d
}
.pricing-table.brown .pt-footer .pt-button {
background-color:#8d512d;
border:2px solid #8d512d
}
.pricing-table.brown .pt-footer .pt-button:hover {
background-color:transparent;
color:#8d512d
}
.pricing-table.brown:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#fff;
color:#8d512d
}
.dark .pricing-table.active {
border:2px solid #505050
}
.dark .pricing-table:hover {
border-color:#505050
}
.dark .pricing-table:hover .pt-title {
background-color:#505050
}
.dark .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#505050
}
.dark .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#505050
}
.dark .pt-footer .pt-button {
background-color:#505050;
border:2px solid #505050
}
.dark .pt-footer .pt-button:hover {
background-color:transparent;
color:#505050
}
.pricing-table.dark.active {
border:2px solid #505050
}
.pricing-table.dark:hover {
border-color:#505050
}
.pricing-table.dark:hover .pt-title {
background-color:#505050
}
.pricing-table.dark:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#505050
}
.pricing-table.dark .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#505050
}
.pricing-table.dark .pt-footer .pt-button {
background-color:#505050;
border:2px solid #505050
}
.pricing-table.dark .pt-footer .pt-button:hover {
background-color:transparent;
color:#505050
}
.pricing-table.dark:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#fff;
color:#505050
}
.light-turquoise .pricing-table.active {
border:2px solid #afeeee
}
.light-turquoise .pricing-table:hover {
border-color:#afeeee
}
.light-turquoise .pricing-table:hover .pt-title {
background-color:#afeeee
}
.light-turquoise .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#afeeee
}
.light-turquoise .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#afeeee
}
.light-turquoise .pt-footer .pt-button {
background-color:#afeeee;
border:2px solid #afeeee
}
.light-turquoise .pt-footer .pt-button:hover {
background-color:transparent;
color:#afeeee
}
.pricing-table.light-turquoise.active {
border:2px solid #afeeee
}
.pricing-table.light-turquoise:hover {
border-color:#afeeee
}
.pricing-table.light-turquoise:hover .pt-title {
background-color:#afeeee
}
.pricing-table.light-turquoise:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#afeeee
}
.pricing-table.light-turquoise .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#afeeee
}
.pricing-table.light-turquoise .pt-footer .pt-button {
background-color:#afeeee;
border:2px solid #afeeee
}
.pricing-table.light-turquoise .pt-footer .pt-button:hover {
background-color:transparent;
color:#afeeee
}
.pricing-table.light-turquoise:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#fff;
color:#afeeee
}
.medium-turquoise .pricing-table.active {
border:2px solid #48d1cc
}
.medium-turquoise .pricing-table:hover {
border-color:#48d1cc
}
.medium-turquoise .pricing-table:hover .pt-title {
background-color:#48d1cc
}
.medium-turquoise .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#48d1cc
}
.medium-turquoise .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#48d1cc
}
.medium-turquoise .pt-footer .pt-button {
background-color:#48d1cc;
border:2px solid #48d1cc
}
.medium-turquoise .pt-footer .pt-button:hover {
background-color:transparent;
color:#48d1cc
}
.pricing-table.medium-turquoise.active {
border:2px solid #48d1cc
}
.pricing-table.medium-turquoise:hover {
border-color:#48d1cc
}
.pricing-table.medium-turquoise:hover .pt-title {
background-color:#48d1cc
}
.pricing-table.medium-turquoise:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#48d1cc
}
.pricing-table.medium-turquoise .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#48d1cc
}
.pricing-table.medium-turquoise .pt-footer .pt-button {
background-color:#48d1cc;
border:2px solid #48d1cc
}
.pricing-table.medium-turquoise .pt-footer .pt-button:hover {
background-color:transparent;
color:#48d1cc
}
.pricing-table.medium-turquoise:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#fff;
color:#48d1cc
}
.dark-turquoise .pricing-table.active {
border:2px solid #00ced1
}
.dark-turquoise .pricing-table:hover {
border-color:#00ced1
}
.dark-turquoise .pricing-table:hover .pt-title {
background-color:#00ced1
}
.dark-turquoise .pricing-table:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#00ced1
}
.dark-turquoise .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#00ced1
}
.dark-turquoise .pt-footer .pt-button {
background-color:#00ced1;
border:2px solid #00ced1
}
.dark-turquoise .pt-footer .pt-button:hover {
background-color:transparent;
color:#00ced1
}
.pricing-table.dark-turquoise.active {
border:2px solid #00ced1
}
.pricing-table.dark-turquoise:hover {
border-color:#00ced1
}
.pricing-table.dark-turquoise:hover .pt-title {
background-color:#00ced1
}
.pricing-table.dark-turquoise:hover .pt-ribbon-wrapper .pt-ribbon {
background:#fff;
color:#00ced1
}
.pricing-table.dark-turquoise .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#00ced1
}
.pricing-table.dark-turquoise .pt-footer .pt-button {
background-color:#00ced1;
border:2px solid #00ced1
}
.pricing-table.dark-turquoise .pt-footer .pt-button:hover {
background-color:transparent;
color:#00ced1
}
.pricing-table.dark-turquoise:hover .pt-header .pt-ribbon-wrapper .pt-ribbon {
background-color:#fff;
color:#00ced1
}