diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss
index e0191a7cf2e..3827d79ff91 100644
--- a/addons/website/static/src/scss/bootstrap_overridden.scss
+++ b/addons/website/static/src/scss/bootstrap_overridden.scss
@@ -62,6 +62,48 @@ $headings-color: o-color('o-cc1-headings') !default;
 
 $text-muted: mute-color($body-color) !default;
 
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-padding-y: o-website-value('btn-padding-y') !default;
+$btn-padding-x: o-website-value('btn-padding-x') !default;
+$btn-font-size: o-website-value('btn-font-size') !default;
+
+$btn-padding-y-sm: o-website-value('btn-padding-y-sm') !default;
+$btn-padding-x-sm: o-website-value('btn-padding-x-sm') !default;
+$btn-font-size-sm: o-website-value('btn-font-size-sm') !default;
+
+$btn-padding-y-lg: o-website-value('btn-padding-y-lg') !default;
+$btn-padding-x-lg: o-website-value('btn-padding-x-lg') !default;
+$btn-font-size-lg: o-website-value('btn-font-size-lg') !default;
+
+$btn-border-width: o-website-value('btn-border-width') !default;
+
+$btn-border-radius: o-website-value('btn-border-radius') !default;
+$btn-border-radius-lg: o-website-value('btn-border-radius-lg') !default;
+$btn-border-radius-sm: o-website-value('btn-border-radius-sm') !default;
+
+// Forms
+
+$input-padding-y: o-website-value('input-padding-y') !default;
+$input-padding-x: o-website-value('input-padding-x') !default;
+$input-font-size: o-website-value('input-font-size') !default;
+
+$input-padding-y-sm: o-website-value('input-padding-y-sm') !default;
+$input-padding-x-sm: o-website-value('input-padding-x-sm') !default;
+$input-font-size-sm: o-website-value('input-font-size-sm') !default;
+
+$input-padding-y-lg: o-website-value('input-padding-y-lg') !default;
+$input-padding-x-lg: o-website-value('input-padding-x-lg') !default;
+$input-font-size-lg: o-website-value('input-font-size-lg') !default;
+
+$input-border-width: o-website-value('input-border-width') !default;
+
+$input-border-radius: o-website-value('input-border-radius') !default;
+$input-border-radius-lg: o-website-value('input-border-radius-lg') !default;
+$input-border-radius-sm: o-website-value('input-border-radius-sm') !default;
+
 // Navbar
 
 // Increase default navbar padding for some navbar styles
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index dd24b665c95..e1b876e3ada 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -256,6 +256,34 @@ $o-base-website-values-palette: (
     'link-underline': 'hover', // 'never' / 'hover' / 'always'
     'btn-ripple': false,
 
+    'btn-padding-y': null, // Default to BS
+    'btn-padding-x': null, // Default to BS
+    'btn-font-size': null, // Default to BS
+    'btn-padding-y-sm': null, // Default to portal value
+    'btn-padding-x-sm': null, // Default to portal value
+    'btn-font-size-sm': null, // Default to BS
+    'btn-padding-y-lg': null, // Default to BS
+    'btn-padding-x-lg': null, // Default to BS
+    'btn-font-size-lg': null, // Default to BS
+    'btn-border-width': null, // Default to BS
+    'btn-border-radius': null, // Default to BS
+    'btn-border-radius-sm': null, // Default to BS
+    'btn-border-radius-lg': null, // Default to BS
+
+    'input-padding-y': null, // Default to BS
+    'input-padding-x': null, // Default to BS
+    'input-font-size': null, // Default to BS
+    'input-padding-y-sm': null, // Default to BS
+    'input-padding-x-sm': null, // Default to BS
+    'input-font-size-sm': null, // Default to BS
+    'input-padding-y-lg': null, // Default to BS
+    'input-padding-x-lg': null, // Default to BS
+    'input-font-size-lg': null, // Default to BS
+    'input-border-width': null, // Default to BS
+    'input-border-radius': null, // Default to BS
+    'input-border-radius-sm': null, // Default to BS
+    'input-border-radius-lg': null, // Default to BS
+
     // A key from the $o-theme-font-configs map (null = default to the first key)
     'font': null,
     'headings-font': null,
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 22b621e4ad6..ae141e84f31 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -46,6 +46,34 @@ $-seen-urls: ();
         $i: $i + 1;
     }
 
+    @include print-variable('btn-padding-y', $btn-padding-y);
+    @include print-variable('btn-padding-x', $btn-padding-x);
+    @include print-variable('btn-font-size', $btn-font-size);
+    @include print-variable('btn-padding-y-sm', $btn-padding-y-sm);
+    @include print-variable('btn-padding-x-sm', $btn-padding-x-sm);
+    @include print-variable('btn-font-size-sm', $btn-font-size-sm);
+    @include print-variable('btn-padding-y-lg', $btn-padding-y-lg);
+    @include print-variable('btn-padding-x-lg', $btn-padding-x-lg);
+    @include print-variable('btn-font-size-lg', $btn-font-size-lg);
+    @include print-variable('btn-border-width', $btn-border-width);
+    @include print-variable('btn-border-radius', $btn-border-radius);
+    @include print-variable('btn-border-radius-sm', $btn-border-radius-sm);
+    @include print-variable('btn-border-radius-lg', $btn-border-radius-lg);
+
+    @include print-variable('input-padding-y', $input-padding-y);
+    @include print-variable('input-padding-x', $input-padding-x);
+    @include print-variable('input-font-size', $input-font-size);
+    @include print-variable('input-padding-y-sm', $input-padding-y-sm);
+    @include print-variable('input-padding-x-sm', $input-padding-x-sm);
+    @include print-variable('input-font-size-sm', $input-font-size-sm);
+    @include print-variable('input-padding-y-lg', $input-padding-y-lg);
+    @include print-variable('input-padding-x-lg', $input-padding-x-lg);
+    @include print-variable('input-font-size-lg', $input-font-size-lg);
+    @include print-variable('input-border-width', $input-border-width);
+    @include print-variable('input-border-radius', $input-border-radius);
+    @include print-variable('input-border-radius-sm', $input-border-radius-sm);
+    @include print-variable('input-border-radius-lg', $input-border-radius-lg);
+
     @include print-variable('number-of-color-palettes', length($o-color-palettes) - 1); // -1 since the last one is the user customized one
     @include print-variable('color-palettes-number', $o-original-color-palette-number);
     @include print-variable('has-customized-colors', $o-has-customized-colors);
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index b16b24a3f6c..157dca3a48e 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1096,6 +1096,8 @@
             <we-fontfamilypicker string="⌙ Headings" data-variable="headings-font"/>
             <we-fontfamilypicker string="⌙ Buttons" data-variable="buttons-font"/>
         </we-collapse>
+
+        <!-- Buttons & Links -->
         <we-select string="Main Buttons" data-variable="btn-primary-outline">
             <we-button data-customize-website-variable="false">Fill</we-button>
             <we-button data-customize-website-variable="true">Outline</we-button>
@@ -1104,7 +1106,32 @@
             <we-button data-customize-website-variable="false">Fill</we-button>
             <we-button data-customize-website-variable="true">Outline</we-button>
         </we-select>
-        <we-checkbox string="Ripple Buttons"
+        <we-collapse>
+            <we-row string="⌙ Paddings">
+                <we-input title="Y" data-customize-website-variable="" data-variable="btn-padding-y" data-unit="px" data-save-unit="rem"/>
+                <we-input title="X" data-customize-website-variable="" data-variable="btn-padding-x" data-unit="px" data-save-unit="rem"/>
+            </we-row>
+            <we-row string=" ⌙ Small">
+                <we-input title="Y" data-customize-website-variable="" data-variable="btn-padding-y-sm" data-unit="px" data-save-unit="rem"/>
+                <we-input title="X" data-customize-website-variable="" data-variable="btn-padding-x-sm" data-unit="px" data-save-unit="rem"/>
+            </we-row>
+            <we-row string=" ⌙ Large">
+                <we-input title="Y" data-customize-website-variable="" data-variable="btn-padding-y-lg" data-unit="px" data-save-unit="rem"/>
+                <we-input title="X" data-customize-website-variable="" data-variable="btn-padding-x-lg" data-unit="px" data-save-unit="rem"/>
+            </we-row>
+        </we-collapse>
+        <we-collapse>
+            <we-input string="⌙ Font Size" data-customize-website-variable="" data-variable="btn-font-size" data-unit="px" data-save-unit="rem"/>
+            <we-input string=" ⌙ Small" data-customize-website-variable="" data-variable="btn-font-size-sm" data-unit="px" data-save-unit="rem"/>
+            <we-input string=" ⌙ Large" data-customize-website-variable="" data-variable="btn-font-size-lg" data-unit="px" data-save-unit="rem"/>
+        </we-collapse>
+        <we-input string="⌙ Border Width" data-customize-website-variable="" data-variable="btn-border-width" data-unit="px" data-save-unit="rem"/>>
+        <we-collapse>
+            <we-input string="⌙ Border Radius" data-customize-website-variable="" data-variable="btn-border-radius" data-unit="px" data-save-unit="rem"/>
+            <we-input string=" ⌙ Small" data-customize-website-variable="" data-variable="btn-border-radius-sm" data-unit="px" data-save-unit="rem"/>
+            <we-input string=" ⌙ Large" data-customize-website-variable="" data-variable="btn-border-radius-lg" data-unit="px" data-save-unit="rem"/>
+        </we-collapse>
+        <we-checkbox string="⌙ Ripple Effect"
                      data-customize-website-views="website.option_ripple_effect"
                      data-customize-website-variable="false|true"
                      data-variable="btn-ripple"/>
@@ -1113,6 +1140,35 @@
             <we-button data-customize-website-variable="'hover'">Underline On Hover</we-button>
             <we-button data-customize-website-variable="'always'">Always Underlined</we-button>
         </we-select>
+
+        <!-- Inputs -->
+        <we-title>Inputs</we-title>
+        <we-collapse>
+            <we-row string="⌙ Paddings">
+                <we-input title="Y" data-customize-website-variable="" data-variable="input-padding-y" data-unit="px" data-save-unit="rem"/>
+                <we-input title="X" data-customize-website-variable="" data-variable="input-padding-x" data-unit="px" data-save-unit="rem"/>
+            </we-row>
+            <we-row string=" ⌙ Small">
+                <we-input title="Y" data-customize-website-variable="" data-variable="input-padding-y-sm" data-unit="px" data-save-unit="rem"/>
+                <we-input title="X" data-customize-website-variable="" data-variable="input-padding-x-sm" data-unit="px" data-save-unit="rem"/>
+            </we-row>
+            <we-row string=" ⌙ Large">
+                <we-input title="Y" data-customize-website-variable="" data-variable="input-padding-y-lg" data-unit="px" data-save-unit="rem"/>
+                <we-input title="X" data-customize-website-variable="" data-variable="input-padding-x-lg" data-unit="px" data-save-unit="rem"/>
+            </we-row>
+        </we-collapse>
+        <we-collapse>
+            <we-input string="⌙ Font Size" data-customize-website-variable="" data-variable="input-font-size" data-unit="px" data-save-unit="rem"/>
+            <we-input string=" ⌙ Small" data-customize-website-variable="" data-variable="input-font-size-sm" data-unit="px" data-save-unit="rem"/>
+            <we-input string=" ⌙ Large" data-customize-website-variable="" data-variable="input-font-size-lg" data-unit="px" data-save-unit="rem"/>
+        </we-collapse>
+        <we-input string="⌙ Border Width" data-customize-website-variable="" data-variable="input-border-width" data-unit="px" data-save-unit="rem"/>>
+        <we-collapse>
+            <we-input string="⌙ Border Radius" data-customize-website-variable="" data-variable="input-border-radius" data-unit="px" data-save-unit="rem"/>
+            <we-input string=" ⌙ Small" data-customize-website-variable="" data-variable="input-border-radius-sm" data-unit="px" data-save-unit="rem"/>
+            <we-input string=" ⌙ Large" data-customize-website-variable="" data-variable="input-border-radius-lg" data-unit="px" data-save-unit="rem"/>
+        </we-collapse>
+
         <we-row string="Status Colors">
             <we-colorpicker title="Success" data-customize-website-color="" data-color-type="theme" data-color="success"/>
             <we-colorpicker title="Info" data-customize-website-color="" data-color-type="theme" data-color="info"/>