Aprende a crear tablas de precios para tu web

Categoría: Desarrollo web, Diseño y maquetación web, Plugins, WordPress
Fecha: 18 septiembre 2019

En la era de la inmediatez, ofrecer una información concisa y visual puede marcar la diferencia a la hora de vender tus productos o servicios. Es importante encontrar una forma eficiente de mostrar las características y precios de tus servicios a tus usuarios, así como poder compararlos rápidamente.

Crear una tabla de precios para tu web es la solución. En este artículo te explicaré que es una tabla de precios y qué debes tener en cuenta a la hora de crearla. Además, aprenderás crear tu propia tabla de precios en WordPress, con plugins y sin ellos, o en una web a medida gracias a Bootstrap.

¿Vamos a ello?

Índice del artículo

Qué es una tabla de precios y para que se usa
- 4 puntos clave para crear una tabla de precios en tu web
Crear una pricing table con Bootstrap para tu web a medida
Los mejores plugins de tablas de precios para WordPress
Crea tu tabla de precios para WordPress sin plugins
Conclusión

¡Suscríbete a nuestra newsletter!

No te enviaremos spam, ¡te lo prometemos!. A nuestros suscriptores les enviamos nuestros contenidos sobre WordPress, hosting, marketing digital y programación.

Qué es una tabla de precios y para que se usa

Una tabla de precios no es más que una representación visual de las principales características de tus servicios o productos. La finalidad es que tus usuarios puedan hacerse una idea de ellas, compararlas y, evidentemente, mejorar la conversión.

Como vale más una imagen que mil palabras, voy a mostrarte unos ejemplos de tablas de precios bien implementadas y luego vemos el porqué.

Para el primer ejemplo, no me hace falta irme muy lejos. En nuestra web utilizamos tablas de precios para cada producto que ofrecemos. Y para este ejemplo he usado la tabla de precios de los servidores VPS SSD:

Como puedes ver, la tabla muestra los distintos paquetes ofrecidos para este tipo de servidores con el precio, las características destacables de cada uno para que se puedan comparar de forma rápida y un botón de llamada a la acción para que el usuario pueda comprar directamente el servicio.

En este caso concreto, al pasar por encima de un paquete con el ratón, este queda destacado en color azul cielo.

Para el segundo ejemplo, te traigo la tabla de precios de la página de venta de un conocido plugin de WordPress:

Mucho más escueta que la anterior, la funcionalidad es la misma, te permite comparar de un vistazo sus planes y escoger el que mejor se adapte a tus necesidades.

En este caso, uno de los planes se encuentra ya destacado como “El más popular”. Es una práctica común en este tipo de tablas y aprovecha el efecto ancla para persuadir a los usuarios a comprar ese paquete en concreto.

4 puntos clave para crear una tabla de precios en tu web

Para tener éxito en la creación de tablas de precios, debes tener en cuenta cuatro criterios clave. En esta sección, te explicaré qué es lo que hace que estos puntos sean tan importantes y la mejor forma de implementarlos en tu tabla de precios.

1. Resumir las opciones con claridad

Una tabla de precios es tan buena como la información que muestra, por lo que es importante delimitar claramente las opciones que ofreceremos antes de crear la tabla.

Mi recomendación es hacer una lista de las características clave que cada plan proporciona en comparación con los demás, manteniendo el enfoque en los aspectos en los que los clientes podrían estar más interesados.

Por ejemplo, en el caso de una empresa de hosting como Raiola Networks, centra sus tablas de precios en los recursos que proporciona cada plan. Es importante evitar, en la medida de lo posible, los términos técnicos y centrarse en sus beneficios más fácilmente comprensibles.

2. Escoge buenos nombres para tus planes

Una vez que conozcas la información que cada uno de tus planes incluirá, es el momento de buscarles un nombre apropiado. Es fácil caer en la tentación de utilizar nombres más o menos estándar. Y, si bien pueden resultar perfectamente apropiados para los servicios que ofreces, posiblemente estés perdiendo la oportunidad de utilizar ese nombre para dar la primera pista a tu cliente sobre lo que le ofreces en cada plan.

Veamos un ejemplo muy claro:

En este primer caso, tenemos nombres de planes para un servicio que podríamos llamar estándar. Por un lado no le estamos dando ninguna información al cliente y, por otro lado, nos obliga a clarificar lo que ofrece el servicio, justo debajo.

En este segundo caso, solo con el título el cliente ya sabe lo que va a comprar. No necesita más aclaraciones.

¿Ves por dónde voy? Aprovecha los nombres de tus planes.

3. Resalta tus mejores ofertas

Resaltar un plan en particular en tu tabla de precios puede ser una muy buena idea. Idealmente, este plan debería proporcionar la mejor relación calidad-precio o rendimiento.

Con esto conseguirás dos cosas.

La primera, como comenté anteriormente, es mejorar la conversión de ese plan en concreto destacándolo por encima de los demás.

La segunda, guiar a tus potenciales clientes con pocos conocimientos de lo que necesitan hacia un plan adecuado para ellos.

Dos pájaros de un tiro.

4. Ofrece información completa

Mantener tus tablas de precios claras y concisas es la mejor forma de asegurarte de que tus visitantes no se sobrecarguen de información y decidan buscar en otro sitio lo que necesitan.

Sin embargo, algunos de tus clientes podrían preferir examinar todos los detalles antes de tomar una decisión, especialmente para productos más complejos.

La mejor manera de abordar este problema es enlazar tus tablas de precios con alternativas más completas. Por ejemplo, incluyendo un enlace hacia una página de producto o de servicios donde expongas toda la información completa sobre el mismo.

Aclarado todo esto, veamos cómo crear una tabla de precios para tu página web según la tecnología que uses o tus preferencias.

En concreto, veremos cómo crear una tabla de precios para una web a medida con Bootstrap, con plugins para WordPress y con un maquetador visual sobre WordPress como Elementor.

Crear una pricing table con Bootstrap para tu web a medida

Si tienes una web a medida, la forma más sencilla de implementar una tabla de precios es utilizando Bootstrap y sus librerías CSS. Para hacer esto tienes que tener unos conocimientos mínimos de desarrollo web o al menos debes saber dónde tienes que colocar cada cosa.

En este caso, parto de que ya tengo Bootstrap instalado y puedo utilizar el código que te voy a enseñar a continuación.

Por un lado tengo el HTML que deberás introducir en el código de tu web, justo en el lugar donde quieras mostrar la tabla de precios:

<code>
<div id="generic_price_table">   
<section>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!--PRICE HEADING START-->
                    <div class="price-heading clearfix">
                        <h1>Bootstrap Pricing Table</h1>
                    </div>
                    <!--//PRICE HEADING END-->
                </div>
            </div>
        </div>
        <div class="container">
            
            <!--BLOCK ROW START-->
            <div class="row">
                <div class="col-md-4">
                
                	<!--PRICE CONTENT START-->
                    <div class="generic_content clearfix">
                        
                        <!--HEAD PRICE DETAIL START-->
                        <div class="generic_head_price clearfix">
                        
                            <!--HEAD CONTENT START-->
                            <div class="generic_head_content clearfix">
                            
                            	<!--HEAD START-->
                                <div class="head_bg"></div>
                                <div class="head">
                                    <span>Basic</span>
                                </div>
                                <!--//HEAD END-->
                                
                            </div>
                            <!--//HEAD CONTENT END-->
                            
                            <!--PRICE START-->
                            <div class="generic_price_tag clearfix">	
                                <span class="price">
                                    <span class="sign">$</span>
                                    <span class="currency">99</span>
                                    <span class="cent">.99</span>
                                    <span class="month">/MON</span>
                                </span>
                            </div>
                            <!--//PRICE END-->
                            
                        </div>                            
                        <!--//HEAD PRICE DETAIL END-->
                        
                        <!--FEATURE LIST START-->
                        <div class="generic_feature_list">
                        	<ul>
                            	<li><span>2GB</span> Bandwidth</li>
                                <li><span>150GB</span> Storage</li>
                                <li><span>12</span> Accounts</li>
                                <li><span>7</span> Host Domain</li>
                                <li><span>24/7</span> Support</li>
                            </ul>
                        </div>
                        <!--//FEATURE LIST END-->
                        
                        <!--BUTTON START-->
                        <div class="generic_price_btn clearfix">
                        	<a class="" href="">Sign up</a>
                        </div>
                        <!--//BUTTON END-->
                        
                    </div>
                    <!--//PRICE CONTENT END-->
                        
                </div>
                
                <div class="col-md-4">
                
                	<!--PRICE CONTENT START-->
                    <div class="generic_content active clearfix">
                        
                        <!--HEAD PRICE DETAIL START-->
                        <div class="generic_head_price clearfix">
                        
                            <!--HEAD CONTENT START-->
                            <div class="generic_head_content clearfix">
                            
                            	<!--HEAD START-->
                                <div class="head_bg"></div>
                                <div class="head">
                                    <span>Standard</span>
                                </div>
                                <!--//HEAD END-->
                                
                            </div>
                            <!--//HEAD CONTENT END-->
                            
                            <!--PRICE START-->
                            <div class="generic_price_tag clearfix">	
                                <span class="price">
                                    <span class="sign">$</span>
                                    <span class="currency">199</span>
                                    <span class="cent">.99</span>
                                    <span class="month">/MON</span>
                                </span>
                            </div>
                            <!--//PRICE END-->
                            
                        </div>                            
                        <!--//HEAD PRICE DETAIL END-->
                        
                        <!--FEATURE LIST START-->
                        <div class="generic_feature_list">
                        	<ul>
                            	<li><span>2GB</span> Bandwidth</li>
                                <li><span>150GB</span> Storage</li>
                                <li><span>12</span> Accounts</li>
                                <li><span>7</span> Host Domain</li>
                                <li><span>24/7</span> Support</li>
                            </ul>
                        </div>
                        <!--//FEATURE LIST END-->
                        
                        <!--BUTTON START-->
                        <div class="generic_price_btn clearfix">
                        	<a class="" href="">Sign up</a>
                        </div>
                        <!--//BUTTON END-->
                        
                    </div>
                    <!--//PRICE CONTENT END-->
                        
                </div>
                <div class="col-md-4">
                
                	<!--PRICE CONTENT START-->
                    <div class="generic_content clearfix">
                        
                        <!--HEAD PRICE DETAIL START-->
                        <div class="generic_head_price clearfix">
                        
                            <!--HEAD CONTENT START-->
                            <div class="generic_head_content clearfix">
                            
                            	<!--HEAD START-->
                                <div class="head_bg"></div>
                                <div class="head">
                                    <span>Unlimited</span>
                                </div>
                                <!--//HEAD END-->
                                
                            </div>
                            <!--//HEAD CONTENT END-->
                            
                            <!--PRICE START-->
                            <div class="generic_price_tag clearfix">	
                                <span class="price">
                                    <span class="sign">$</span>
                                    <span class="currency">299</span>
                                    <span class="cent">.99</span>
                                    <span class="month">/MON</span>
                                </span>
                            </div>
                            <!--//PRICE END-->
                            
                        </div>                            
                        <!--//HEAD PRICE DETAIL END-->
                        
                        <!--FEATURE LIST START-->
                        <div class="generic_feature_list">
                        	<ul>
                            	<li><span>2GB</span> Bandwidth</li>
                                <li><span>150GB</span> Storage</li>
                                <li><span>12</span> Accounts</li>
                                <li><span>7</span> Host Domain</li>
                                <li><span>24/7</span> Support</li>
                            </ul>
                        </div>
                        <!--//FEATURE LIST END-->
                        
                        <!--BUTTON START-->
                        <div class="generic_price_btn clearfix">
                        	<a class="" href="">Sign up</a>
                        </div>
                        <!--//BUTTON END-->
                        
                    </div>
                    <!--//PRICE CONTENT END-->
                        
                </div>
            </div>	
            <!--//BLOCK ROW END-->
            
        </div>
    </section>
</div>
<code>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

<code>

<h1>Bootstrap Pricing Table</h1>

</div>

</div>

<span>Basic</span>

</div>

</div>

</span>

</div>

</div>

<ul>

<li><span>2GB</span> Bandwidth</li>

<li><span>150GB</span> Storage</li>

<li><span>12</span> Accounts</li>

<li><span>7</span> Host Domain</li>

<li><span>24/7</span> Support</li>

</ul>

</div>

</div>

</div>

</div>

<span>Standard</span>

</div>

</div>

</span>

</div>

</div>

<ul>

<li><span>2GB</span> Bandwidth</li>

<li><span>150GB</span> Storage</li>

<li><span>12</span> Accounts</li>

<li><span>7</span> Host Domain</li>

<li><span>24/7</span> Support</li>

</ul>

</div>

</div>

</div>

</div>

<span>Unlimited</span>

</div>

</div>

</span>

</div>

</div>

<ul>

<li><span>2GB</span> Bandwidth</li>

<li><span>150GB</span> Storage</li>

<li><span>12</span> Accounts</li>

<li><span>7</span> Host Domain</li>

<li><span>24/7</span> Support</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</section>

</div>

<code>

Esto creará la estructura de tu tabla.

Y ahora el segundo paso: darle los estilos mediante CSS.

El código que usarás es el siguiente:

<code>
@import url(https://serv4.raiolanetworks.es/blog/wp-content/uploads/omgf/inline-import-0/inline-import-0.css);
@import url(https://serv4.raiolanetworks.es/blog/wp-content/uploads/omgf/inline-import-1/inline-import-1.css);
@import url(https://serv4.raiolanetworks.es/blog/wp-content/uploads/omgf/inline-import-1/inline-import-1.css);
body{background-color:#eee;}

#generic_price_table{
	background-color: #f0eded;
}

/*PRICE COLOR CODE START*/
#generic_price_table .generic_content{
	background-color: #fff;
}

#generic_price_table .generic_content .generic_head_price{
	background-color: #f6f6f6;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{
	border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{
	color: #525252;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{
    color: #414141;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{
    color: #414141;
}

#generic_price_table .generic_content .generic_feature_list ul li{	
	color: #a7a7a7;
}

#generic_price_table .generic_content .generic_feature_list ul li span{
	color: #414141;
}
#generic_price_table .generic_content .generic_feature_list ul li:hover{
	background-color: #E4E4E4;
	border-left: 5px solid #2ECC71;
}

#generic_price_table .generic_content .generic_price_btn a{
	border: 1px solid #2ECC71; 
    color: #2ECC71;
} 

#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg{
	border-color: #2ECC71 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #2ECC71;
	color: #fff;
}

#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head span,
#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head span{
	color: #fff;
}

#generic_price_table .generic_content:hover .generic_price_btn a,
#generic_price_table .generic_content.active .generic_price_btn a{
	background-color: #2ECC71;
	color: #fff;
} 
#generic_price_table{
	margin: 50px 0 50px 0;
    font-family: 'Raleway', sans-serif;
}
.row .table{
    padding: 28px 0;
}

/*PRICE BODY CODE START*/

#generic_price_table .generic_content{
	overflow: hidden;
	position: relative;
	text-align: center;
}

#generic_price_table .generic_content .generic_head_price {
	margin: 0 0 20px 0;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content{
	margin: 0 0 50px 0;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{
    border-style: solid;
    border-width: 90px 1411px 23px 399px;
	position: absolute;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head{
	padding-top: 40px;
	position: relative;
	z-index: 1;
}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{
    font-family: "Raleway",sans-serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag{
	padding: 0 0 20px;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price{
	display: block;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{
    display: inline-block;
    font-family: "Lato",sans-serif;
    font-size: 28px;
    font-weight: 400;
    vertical-align: middle;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{
    font-family: "Lato",sans-serif;
    font-size: 60px;
    font-weight: 300;
    letter-spacing: -2px;
    line-height: 60px;
    padding: 0;
    vertical-align: middle;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{
    display: inline-block;
    font-family: "Lato",sans-serif;
    font-size: 24px;
    font-weight: 400;
    vertical-align: bottom;
}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{
    font-family: "Lato",sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3px;
    vertical-align: bottom;
}

#generic_price_table .generic_content .generic_feature_list ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

#generic_price_table .generic_content .generic_feature_list ul li{
	font-family: "Lato",sans-serif;
	font-size: 18px;
	padding: 15px 0;
	transition: all 0.3s ease-in-out 0s;
}
#generic_price_table .generic_content .generic_feature_list ul li:hover{
	transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;

}
#generic_price_table .generic_content .generic_feature_list ul li .fa{
	padding: 0 10px;
}
#generic_price_table .generic_content .generic_price_btn{
	margin: 20px 0 32px;
}

#generic_price_table .generic_content .generic_price_btn a{
    border-radius: 50px;
	-moz-border-radius: 50px;
	-ms-border-radius: 50px;
	-o-border-radius: 50px;
	-webkit-border-radius: 50px;
    display: inline-block;
    font-family: "Lato",sans-serif;
    font-size: 18px;
    outline: medium none;
    padding: 12px 30px;
    text-decoration: none;
    text-transform: uppercase;
}

#generic_price_table .generic_content,
#generic_price_table .generic_content:hover,
#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg,
#generic_price_table .generic_content .generic_head_price .generic_head_content .head h2,
#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head h2,
#generic_price_table .generic_content .price,
#generic_price_table .generic_content:hover .price,
#generic_price_table .generic_content .generic_price_btn a,
#generic_price_table .generic_content:hover .generic_price_btn a{
	transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-webkit-transition: all 0.3s ease-in-out 0s;
} 
@media (max-width: 320px) {	
}

@media (max-width: 767px) {
	#generic_price_table .generic_content{
		margin-bottom:75px;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#generic_price_table .col-md-3{
		float:left;
		width:50%;
	}
	
	#generic_price_table .col-md-4{
		float:left;
		width:50%;
	}
	
	#generic_price_table .generic_content{
		margin-bottom:75px;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
}
@media (min-width: 1200px) {
}
#generic_price_table_home{
	 font-family: 'Raleway', sans-serif;
}

.text-center h1,
.text-center h1 a{
	color: #7885CB;
	font-size: 30px;
	font-weight: 300;
	text-decoration: none;
}
.demo-pic{
	margin: 0 auto;
}
.demo-pic:hover{
	opacity: 0.7;
}

#generic_price_table_home ul{
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: table;
}
#generic_price_table_home li{
	float: left;
}
#generic_price_table_home li + li{
	margin-left: 10px;
	padding-bottom: 10px;
}
#generic_price_table_home li a{
	display: block;
	width: 50px;
	height: 50px;
	font-size: 0px;
}
#generic_price_table_home .blue{
	background: #3498DB;
	transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .emerald{
	background: #2ECC71;
	transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .grey{
	background: #7F8C8D;
	transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .midnight{
	background: #34495E;
	transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .orange{
	background: #E67E22;
	transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .purple{
	background: #9B59B6;
	transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .red{
	background: #E74C3C;
	transition:all 0.3s ease-in-out 0s;
}
#generic_price_table_home .turquoise{
	background: #1ABC9C;
	transition: all 0.3s ease-in-out 0s;
}

#generic_price_table_home .blue:hover,
#generic_price_table_home .emerald:hover,
#generic_price_table_home .grey:hover,
#generic_price_table_home .midnight:hover,
#generic_price_table_home .orange:hover,
#generic_price_table_home .purple:hover,
#generic_price_table_home .red:hover,
#generic_price_table_home .turquoise:hover{
	border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
	transition: all 0.3s ease-in-out 0s;
}
#generic_price_table_home .divider{
	border-bottom: 1px solid #ddd;
	margin-bottom: 20px;
	padding: 20px;
}
#generic_price_table_home .divider span{
	width: 100%;
	display: table;
	height: 2px;
	background: #ddd;
	margin: 50px auto;
	line-height: 2px;
}
#generic_price_table_home .itemname{
	text-align: center;
	font-size: 50px ;
	padding: 50px 0 20px ;
	border-bottom: 1px solid #ddd;
	margin-bottom: 40px;
	text-decoration: none;
    font-weight: 300;
}
#generic_price_table_home .itemnametext{
    text-align: center;
    font-size: 20px;
    padding-top: 5px;
    text-transform: uppercase;
    display: inline-block;
}
#generic_price_table_home .footer{
	padding:40px 0;
}

.price-heading{
    text-align: center;
}
.price-heading h1{
	color: #666;
	margin: 0;
	padding: 0 0 50px 0;
}
.demo-button {
    background-color: #333333;
    color: #ffffff;
    display: table;
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 50px;
    outline-color: -moz-use-text-color;
    outline-style: none;
    outline-width: medium ;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
}
.bottom_btn{
	background-color: #333333;
    color: #ffffff;
    display: table;
    font-size: 28px;
    margin: 60px auto 20px;
    padding: 10px 25px;
    text-align: center;
    text-transform: uppercase;
}
.demo-button:hover{
	background-color: #666;
	color: #FFF;
	text-decoration:none;
	
}
.bottom_btn:hover{
	background-color: #666;
	color: #FFF;
	text-decoration:none;
}
<code>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

<code>

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700italic,700,900italic,900);

@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);

body{background-color:#eee;}

#generic_price_table{

background-color: #f0eded;

}

/*PRICE COLOR CODE START*/

#generic_price_table .generic_content{

background-color: #fff;

}

#generic_price_table .generic_content .generic_head_price{

background-color: #f6f6f6;

}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{

border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4;

}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{

color: #525252;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{

color: #414141;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{

color: #414141;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{

color: #414141;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{

color: #414141;

}

#generic_price_table .generic_content .generic_feature_list ul li{

color: #a7a7a7;

}

#generic_price_table .generic_content .generic_feature_list ul li span{

color: #414141;

}

#generic_price_table .generic_content .generic_feature_list ul li:hover{

background-color: #E4E4E4;

border-left: 5px solid #2ECC71;

}

#generic_price_table .generic_content .generic_price_btn a{

border: 1px solid #2ECC71;

color: #2ECC71;

}

#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg,

#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg{

border-color: #2ECC71 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #2ECC71;

color: #fff;

}

#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head span,

#generic_price_table .generic_content.active .generic_head_price .generic_head_content .head span{

color: #fff;

}

#generic_price_table .generic_content:hover .generic_price_btn a,

#generic_price_table .generic_content.active .generic_price_btn a{

background-color: #2ECC71;

color: #fff;

}

#generic_price_table{

margin: 50px 0 50px 0;

font-family: 'Raleway', sans-serif;

}

.row .table{

padding: 28px 0;

}

/*PRICE BODY CODE START*/

#generic_price_table .generic_content{

overflow: hidden;

position: relative;

text-align: center;

}

#generic_price_table .generic_content .generic_head_price {

margin: 0 0 20px 0;

}

#generic_price_table .generic_content .generic_head_price .generic_head_content{

margin: 0 0 50px 0;

}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{

border-style: solid;

border-width: 90px 1411px 23px 399px;

position: absolute;

}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head{

padding-top: 40px;

position: relative;

z-index: 1;

}

#generic_price_table .generic_content .generic_head_price .generic_head_content .head span{

font-family: "Raleway",sans-serif;

font-size: 28px;

font-weight: 400;

letter-spacing: 2px;

margin: 0;

padding: 0;

text-transform: uppercase;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag{

padding: 0 0 20px;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price{

display: block;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{

display: inline-block;

font-family: "Lato",sans-serif;

font-size: 28px;

font-weight: 400;

vertical-align: middle;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{

font-family: "Lato",sans-serif;

font-size: 60px;

font-weight: 300;

letter-spacing: -2px;

line-height: 60px;

padding: 0;

vertical-align: middle;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{

display: inline-block;

font-family: "Lato",sans-serif;

font-size: 24px;

font-weight: 400;

vertical-align: bottom;

}

#generic_price_table .generic_content .generic_head_price .generic_price_tag .month{

font-family: "Lato",sans-serif;

font-size: 18px;

font-weight: 400;

letter-spacing: 3px;

vertical-align: bottom;

}

#generic_price_table .generic_content .generic_feature_list ul{

list-style: none;

padding: 0;

margin: 0;

}

#generic_price_table .generic_content .generic_feature_list ul li{

font-family: "Lato",sans-serif;

font-size: 18px;

padding: 15px 0;

transition: all 0.3s ease-in-out 0s;

}

#generic_price_table .generic_content .generic_feature_list ul li:hover{

transition: all 0.3s ease-in-out 0s;

-moz-transition: all 0.3s ease-in-out 0s;

-ms-transition: all 0.3s ease-in-out 0s;

-o-transition: all 0.3s ease-in-out 0s;

-webkit-transition: all 0.3s ease-in-out 0s;

}

#generic_price_table .generic_content .generic_feature_list ul li .fa{

padding: 0 10px;

}

#generic_price_table .generic_content .generic_price_btn{

margin: 20px 0 32px;

}

#generic_price_table .generic_content .generic_price_btn a{

border-radius: 50px;

-moz-border-radius: 50px;

-ms-border-radius: 50px;

-o-border-radius: 50px;

-webkit-border-radius: 50px;

display: inline-block;

font-family: "Lato",sans-serif;

font-size: 18px;

outline: medium none;

padding: 12px 30px;

text-decoration: none;

text-transform: uppercase;

}

#generic_price_table .generic_content,

#generic_price_table .generic_content:hover,

#generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg,

#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg,

#generic_price_table .generic_content .generic_head_price .generic_head_content .head h2,

#generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head h2,

#generic_price_table .generic_content .price,

#generic_price_table .generic_content:hover .price,

#generic_price_table .generic_content .generic_price_btn a,

#generic_price_table .generic_content:hover .generic_price_btn a{

transition: all 0.3s ease-in-out 0s;

-moz-transition: all 0.3s ease-in-out 0s;

-ms-transition: all 0.3s ease-in-out 0s;

-o-transition: all 0.3s ease-in-out 0s;

-webkit-transition: all 0.3s ease-in-out 0s;

}

@media (max-width: 320px) {

}

RESPONSABLE:	RAIOLA NETWORKS, S.L. C.I.F.: B27453489 Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo) Telefono: +34 982776081 e-mail: info@raiolanetworks.es
FINALIDAD:	Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
LEGITIMACIÓN:	Consentimiento del interesado y contratación de productos y/o servicios del Responsable
DESTINATARIOS:	No se ceden datos a terceros, salvo obligación legal. Personas físicas o jurídicas directamente relacionadas con el Responsable Encargados de Tratamiento adheridos al Privacy Shield
DERECHOS:	Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
INFORMACIÓN ADICIONAL:	Se puede consultar la política de privacidad de forma más detallada aquí.