diff --git a/website_mail_snippet_responsive/__init__.py b/website_mail_snippet_responsive/__init__.py
index e69de29b..0650744f 100644
--- a/website_mail_snippet_responsive/__init__.py
+++ b/website_mail_snippet_responsive/__init__.py
@@ -0,0 +1 @@
+from . import models
diff --git a/website_mail_snippet_responsive/__openerp__.py b/website_mail_snippet_responsive/__openerp__.py
index c2acbdc8..595b6a34 100644
--- a/website_mail_snippet_responsive/__openerp__.py
+++ b/website_mail_snippet_responsive/__openerp__.py
@@ -27,5 +27,6 @@
         "views/snippet_hr.xml",
         "views/snippet_img_text.xml",
         "views/snippet_text_img.xml",
+        "views/res_config_view.xml",
     ],
 }
diff --git a/website_mail_snippet_responsive/models/__init__.py b/website_mail_snippet_responsive/models/__init__.py
new file mode 100644
index 00000000..1e58f775
--- /dev/null
+++ b/website_mail_snippet_responsive/models/__init__.py
@@ -0,0 +1,7 @@
+# -*- coding: utf-8 -*-
+# (c) 2015 Antiun Ingeniería S.L. - Sergio Teruel
+# (c) 2015 Antiun Ingeniería S.L. - Carlos Dauden
+# License AGPL-3 - See http://www.gnu.org/licenses/agpl-3.0.
+
+from . import res_config
+from . import website
diff --git a/website_mail_snippet_responsive/models/res_config.py b/website_mail_snippet_responsive/models/res_config.py
new file mode 100644
index 00000000..ce78411c
--- /dev/null
+++ b/website_mail_snippet_responsive/models/res_config.py
@@ -0,0 +1,13 @@
+# -*- coding: utf-8 -*-
+# © 2016 Incaser Informatica S.L. - Sergio Teruel
+# © 2016 Incaser Informatica S.L. - Carlos Dauden
+# License AGPL-3 - See http://www.gnu.org/licenses/agpl-3.0.html
+
+from openerp import models, fields
+
+
+class WebsiteMailSippetResponsive(models.TransientModel):
+    _name = 'website.config.settings'
+    _inherit = ['website.config.settings']
+
+    mail_button_color = fields.Char(related='website_id.mail_button_color')
diff --git a/website_mail_snippet_responsive/models/website.py b/website_mail_snippet_responsive/models/website.py
new file mode 100644
index 00000000..86944c40
--- /dev/null
+++ b/website_mail_snippet_responsive/models/website.py
@@ -0,0 +1,12 @@
+# -*- coding: utf-8 -*-
+# (c) 2015 Antiun Ingeniería S.L. - Sergio Teruel
+# (c) 2015 Antiun Ingeniería S.L. - Carlos Dauden
+# License AGPL-3 - See http://www.gnu.org/licenses/agpl-3.0.
+
+from openerp import models, fields
+
+
+class Website(models.Model):
+    _inherit = 'website'
+
+    mail_button_color = fields.Char(default='#00B518')
diff --git a/website_mail_snippet_responsive/views/res_config_view.xml b/website_mail_snippet_responsive/views/res_config_view.xml
new file mode 100644
index 00000000..ec22513f
--- /dev/null
+++ b/website_mail_snippet_responsive/views/res_config_view.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+<data>
+
+    <record id="view_website_config_settings" model="ir.ui.view">
+        <field name="name">Email Application</field>
+        <field name="model">website.config.settings</field>
+        <field name="inherit_id" ref="website.view_website_config_settings"/>
+        <field name="arch" type="xml">
+            <xpath expr="//group[@string='Menu']" position="after">
+                <group string="Mail">
+                    <label for="id" string="Mail button color"/>
+                    <div>
+                        <div>
+                            <field name="mail_button_color" class="oe_inline"/>
+                        </div>
+                    </div>
+                </group>
+            </xpath>
+        </field>
+    </record>
+
+</data>
+</openerp>
\ No newline at end of file
diff --git a/website_mail_snippet_responsive/views/snippet_1_col.xml b/website_mail_snippet_responsive/views/snippet_1_col.xml
index f9facb6f..f417f178 100644
--- a/website_mail_snippet_responsive/views/snippet_1_col.xml
+++ b/website_mail_snippet_responsive/views/snippet_1_col.xml
@@ -38,7 +38,7 @@
                                         <table border="0" cellpadding="0" cellspacing="0">
                                             <tbody>
                                                 <tr>
-                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
+                                                    <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
                                                 </tr>
                                             </tbody>
                                         </table>
diff --git a/website_mail_snippet_responsive/views/snippet_2_cols.xml b/website_mail_snippet_responsive/views/snippet_2_cols.xml
index c6dc0a13..c0c025c0 100644
--- a/website_mail_snippet_responsive/views/snippet_2_cols.xml
+++ b/website_mail_snippet_responsive/views/snippet_2_cols.xml
@@ -47,7 +47,7 @@
                                                           <table border="0" cellpadding="0" cellspacing="0">
                                                               <tbody>
                                                                   <tr>
-                                                                      <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
+                                                                      <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
                                                                   </tr>
                                                               </tbody>
                                                           </table>
@@ -97,7 +97,7 @@
                                                           <table border="0" cellpadding="0" cellspacing="0">
                                                               <tbody>
                                                                   <tr>
-                                                                      <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
+                                                                      <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
                                                                   </tr>
                                                               </tbody>
                                                           </table>
diff --git a/website_mail_snippet_responsive/views/snippet_3_cols.xml b/website_mail_snippet_responsive/views/snippet_3_cols.xml
index 9ad2bec7..8b276d80 100644
--- a/website_mail_snippet_responsive/views/snippet_3_cols.xml
+++ b/website_mail_snippet_responsive/views/snippet_3_cols.xml
@@ -47,7 +47,7 @@
                                                         <table border="0" cellpadding="0" cellspacing="0">
                                                             <tbody>
                                                                 <tr>
-                                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
+                                                                    <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
                                                                 </tr>
                                                             </tbody>
                                                         </table>
@@ -98,7 +98,7 @@
                                                         <table border="0" cellpadding="0" cellspacing="0">
                                                             <tbody>
                                                                 <tr>
-                                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
+                                                                    <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
                                                                 </tr>
                                                             </tbody>
                                                         </table>
@@ -149,7 +149,7 @@
                                                         <table border="0" cellpadding="0" cellspacing="0">
                                                             <tbody>
                                                                 <tr>
-                                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
+                                                                    <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
                                                                 </tr>
                                                             </tbody>
                                                         </table>
diff --git a/website_mail_snippet_responsive/views/snippet_event_date.xml b/website_mail_snippet_responsive/views/snippet_event_date.xml
index 62ba7b8c..08563ce7 100644
--- a/website_mail_snippet_responsive/views/snippet_event_date.xml
+++ b/website_mail_snippet_responsive/views/snippet_event_date.xml
@@ -86,7 +86,7 @@
                                                         <table border="0" cellpadding="0" cellspacing="0">
                                                             <tbody>
                                                                 <tr>
-                                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank">Learn more</a></td>
+                                                                    <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="bg_color_picker" target="_blank">Learn more</a></td>
                                                                 </tr>
                                                             </tbody>
                                                         </table>
diff --git a/website_mail_snippet_responsive/views/snippet_hr.xml b/website_mail_snippet_responsive/views/snippet_hr.xml
index b5cf9988..3765d3fe 100644
--- a/website_mail_snippet_responsive/views/snippet_hr.xml
+++ b/website_mail_snippet_responsive/views/snippet_hr.xml
@@ -25,7 +25,7 @@
             <t t-set="title">Horizontal Separator</t>
             <tbody>
                 <tr>
-                    <td bgcolor="#00B518"
+                    <td t-attf-bgcolor="#{website.mail_button_color}"
                         height="5"
                         class="bg_color_picker vertical_resizable"/>
                 </tr>
diff --git a/website_mail_snippet_responsive/views/snippet_img_text.xml b/website_mail_snippet_responsive/views/snippet_img_text.xml
index 38a9b2f2..973dc85d 100644
--- a/website_mail_snippet_responsive/views/snippet_img_text.xml
+++ b/website_mail_snippet_responsive/views/snippet_img_text.xml
@@ -53,7 +53,7 @@
                                                                         <table border="0" cellpadding="0" cellspacing="0">
                                                                             <tbody>
                                                                                 <tr>
-                                                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
+                                                                                    <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
                                                                                 </tr>
                                                                             </tbody>
                                                                         </table>
diff --git a/website_mail_snippet_responsive/views/snippet_text_img.xml b/website_mail_snippet_responsive/views/snippet_text_img.xml
index 548809b3..5084adb7 100644
--- a/website_mail_snippet_responsive/views/snippet_text_img.xml
+++ b/website_mail_snippet_responsive/views/snippet_text_img.xml
@@ -36,7 +36,7 @@
                                                                         <table border="0" cellpadding="0" cellspacing="0">
                                                                             <tbody>
                                                                                 <tr>
-                                                                                    <td align="center"><a href="#" style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #00B518; border-top: 10px solid #00B518; border-bottom: 10px solid #00B518; border-left: 20px solid #00B518; border-right: 20px solid #00B518; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
+                                                                                    <td align="center"><a href="#" t-attf-style="font-size: 9pt; font-family: Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #{website.mail_button_color}; border-top: 10px solid #{website.mail_button_color}; border-bottom: 10px solid #{website.mail_button_color}; border-left: 20px solid #{website.mail_button_color}; border-right: 20px solid #{website.mail_button_color}; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" target="_blank" class="bg_color_picker">Learn more</a></td>
                                                                                 </tr>
                                                                             </tbody>
                                                                         </table>