{"id":6432,"date":"2020-09-22T18:31:14","date_gmt":"2020-09-22T18:31:14","guid":{"rendered":"https:\/\/www.terluinwebdesign.nl\/fr\/?p=6432"},"modified":"2025-07-18T14:58:58","modified_gmt":"2025-07-18T14:58:58","slug":"flexible-padding-for-buttons","status":"publish","type":"post","link":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/","title":{"rendered":"Flexible padding for buttons"},"content":{"rendered":"<pre><prevent-autop><div class=\"row all d__content-in-narrow-container t__content-in-container m__content-in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"1969\" data-cache-vw-t=\"617\" data-cache-h-t=\"1617.8984375\" data-cache-vw-m=\"462\" data-cache-h-m=\"3704.8671875\"><div class=\"col all\"><p>Sometimes, left and right padding on a button can cause trouble if the total width of the button does not fit inside a specific container. Making the text break to the new line makes it look bad, but letting the text overflow the button's width itself looks even worse.<\/p><p><b>That's where flexbox and pseudo-elements <code>::before<\/code> and <code>::after<\/code> come in handy.<\/b><\/p><aside class=\"row all bg-yellow__light v-center h-center c half-row-gap d__pad-top-s t__pad-top-m m__pad-top-m d__pad-bottom-s t__pad-bottom-m m__pad-bottom-m d__in-narrow-container wrap t__vertical m__vertical t__in-container m__in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"80.203125\" data-cache-vw-t=\"617\" data-cache-h-t=\"116.9375\" data-cache-vw-m=\"462\" data-cache-h-m=\"247.125\"><div class=\"col all d__mar-right-0 d__mar-bottom-0 t__mar-bottom-s m__mar-bottom-s\"><p class=\"wrap-balance anim-fade-in\"><b class=\"h6-size\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/b><\/p><\/div><div class=\"col all mar-bottom-0 w-auto\"><a class=\"button anim-fade-in bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size w-auto pad-left-s pad-right-s pad-bottom-xs pad-top-xs\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><\/aside><p>Using <code>::before<\/code>, and <code>::after<\/code> inside a flexbox gives you the opportunity to simulate left and right padding and allowing those paddings to shrink inside of the button.<\/p><video width=\"492\" height=\"216\" class=\"h-auto softer-shadow\" autoplay=\"\" loop=\"\" defaultmuted=\"\" muted=\"\">\r\n    <source type=\"video\/mp4\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/button-with-flexible-padding.mp4\">\r\n<\/video><tw-pre><code class=\"css-code\">  .button <span class=\"CSS-DELIMITER\">{<\/span>\r\n    <span class=\"CSS-PROPERTY\">display<\/span><span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">inline-flex<\/span><span class=\"CSS-DELIMITER\">;<\/span>\r\n    <span class=\"CSS-PROPERTY\">justify-content<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">center<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n    <span class=\"CSS-PROPERTY\">max-width<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">100%<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n    <span class=\"CSS-PROPERTY SEMI-OPAQUE\">line-height<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">1.2<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n    <span class=\"CSS-PROPERTY SEMI-OPAQUE\">padding<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">1.1em<\/span> <span class=\"CSS-PROPERTY-VALUE\">.75em<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n    \r\n    <span class=\"CSS-PROPERTY SEMI-OPAQUE\">background-color<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">#004578<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n    <span class=\"CSS-PROPERTY SEMI-OPAQUE\">color<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">#ffffff<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n    <span class=\"CSS-PROPERTY SEMI-OPAQUE\">font-family<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">Arial<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n    <span class=\"CSS-PROPERTY SEMI-OPAQUE\">text-decoration<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">none<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n  <span class=\"CSS-DELIMITER\">}<\/span>\r\n  \r\n  .button::before<span class=\"CSS-DELIMITER\">,<\/span>\r\n  .button::after <span class=\"CSS-DELIMITER\">{<\/span>\r\n    <span class=\"CSS-PROPERTY\">content<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">''<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n    <span class=\"CSS-PROPERTY\">display<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">inline-block<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n    <span class=\"CSS-PROPERTY\">width<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">2em<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n    <span class=\"CSS-PROPERTY\">flex-basis<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">2em<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n    <span class=\"CSS-PROPERTY\">float<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">left<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n  <span class=\"CSS-DELIMITER\">}<\/span>\r\n<\/code><\/tw-pre><p>Only trouble is, without using <code>white-space: nowrap<\/code>&nbsp;on your button ... if a button has multiple words, then those will break into multiple lines as well as shrink the left and right paddings instead of only shrinking the left and right padding as long as the words do not need to be wrapped to the next line.<\/p><p>A solution we came up with for this, besides disabling word-wrapping (obviously), is wrapping the contents of the button inside of a <code>&lt;span&gt;<\/code> and applying both&nbsp;<code>flex-shrink: 0<\/code>&nbsp;and <code>max-width: 100%<\/code> to it.<\/p><div class=\"row all m__vertical\"><div class=\"col all\"><h2 class=\"h3\">Option A - Prevent text shrink<\/h2><tw-pre><code class=\"css-code\">  .button &gt; span <span class=\"CSS-DELIMITER\">{<\/span>\r\n    <span class=\"CSS-PROPERTY\">flex-shrink<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">0<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n    <span class=\"CSS-PROPERTY\">max-width<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">100%<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n  <span class=\"CSS-DELIMITER\">}<\/span>\r\n<\/code><\/tw-pre><h3 class=\"h4\">Pro<\/h3><ul><li>Word-wrap is available after a button's padding is shrunk down to 0px wide<\/li><\/ul><h3 class=\"h4\">Con<\/h3><ul><li>Less consistent button HTML-markup<\/li><\/ul><\/div><div class=\"col all\"><h2 class=\"h3\">Option B - Prevent word-wrap<\/h2><tw-pre><code class=\"css-code\">  .button <span class=\"CSS-DELIMITER\">{<\/span>\r\n    <span class=\"CSS-PROPERTY\">white-space<span class=\"CSS-DELIMITER\">:<\/span> <span class=\"CSS-PROPERTY-VALUE\">nowrap<\/span><span class=\"CSS-DELIMITER\">;<\/span><\/span>\r\n  <span class=\"CSS-DELIMITER\">}<\/span>\r\n<\/code><\/tw-pre><br><h3 class=\"h4\">Pro<\/h3><ul><li>Buttons with multiple words do not require additional HTML-markup<\/li><\/ul><h3 class=\"h4\">Con<\/h3><ul><li>Word-wrap is not available<\/li><\/ul><\/div><\/div><p>It's up to you whether you would use <code>white-space: nowrap<\/code> on all buttons to prevent multi-word buttons from wrapping words altogether... or to wrap the content of the button inside a <code>&lt;span&gt;<\/code>. We recommend wrapping the content inside of a <code>&lt;span&gt;<\/code> (option A), thus leaving the possibility to wrap the words in case the padding is already shrunk down to 0px in width, eventhough that will make the HTML-markup for buttons a little less consistent.<\/p><\/div><\/div><aside class=\"row all t__content-in-container m__content-in-container d__in-container v-center bg-yellow__light m__vertical color-scheme-light__dark bg-yellow__dark t__vertical t__h-center t__c m__c\" data-cache-vw-d=\"1512\" data-cache-h-d=\"318.53125\" data-cache-vw-t=\"617\" data-cache-h-t=\"836.5546875\" data-cache-vw-m=\"462\" data-cache-h-m=\"870.9609375\"><div class=\"col all w-1\/d\/3 w-10\/t\/13\"><h2 class=\"t__h1 wrap-balance anim-fade-in\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/h2><a class=\"button bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><div class=\"col all\"><div class=\"row all m__vertical t__vertical\"><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/website-builder-ai-bizbuilder-homepage.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3020\" height=\"1645\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/website-builder-ai-bizbuilder-homepage-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"193.453125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"272.796875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"219.4921875\" data-img-of-m=\"fill\"><\/div><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/bizbuilder-dienst-pagina-desktop.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3840\" height=\"2160\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/bizbuilder-dienst-pagina-desktop-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"200.40625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"282.609375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"227.390625\" data-img-of-m=\"fill\"><\/div><\/div><\/div><\/aside><\/prevent-autop><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes, left and right padding on a button can cause trouble if the total width of the button does not fit inside a specific container. Making the text break to the new line makes it look bad, but letting the text overflow the button&#8217;s width itself looks even worse.That&#8217;s where flexbox and pseudo-elements ::before and <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/\" class=\"read-more-link block\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":8537,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,56],"tags":[],"class_list":["post-6432","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Flexible padding for buttons, using flexbox &#8211; Terluin Webdesign<\/title>\n<meta name=\"description\" content=\"Make your buttons flexible by allowing the left and right padding to shrink automatically if there is less available space within containers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flexible padding for buttons, using flexbox &#8211; Terluin Webdesign\" \/>\n<meta property=\"og:description\" content=\"Make your buttons flexible by allowing the left and right padding to shrink automatically if there is less available space within containers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/\" \/>\n<meta property=\"og:site_name\" content=\"Terluin Webdesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TerluinWebdesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-22T18:31:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T14:58:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/flexible-padding-for-buttons.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"676\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Thijs Terluin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:site\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thijs Terluin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/\"},\"author\":{\"name\":\"Thijs Terluin\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\"},\"headline\":\"Flexible padding for buttons\",\"datePublished\":\"2020-09-22T18:31:14+00:00\",\"dateModified\":\"2025-07-18T14:58:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/flexible-padding-for-buttons.jpg\",\"articleSection\":[\"Blog\",\"CSS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/\",\"name\":\"Flexible padding for buttons, using flexbox &#8211; Terluin Webdesign\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/flexible-padding-for-buttons.jpg\",\"datePublished\":\"2020-09-22T18:31:14+00:00\",\"dateModified\":\"2025-07-18T14:58:58+00:00\",\"description\":\"Make your buttons flexible by allowing the left and right padding to shrink automatically if there is less available space within containers.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/#primaryimage\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/flexible-padding-for-buttons.jpg\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/flexible-padding-for-buttons.jpg\",\"width\":1200,\"height\":676,\"caption\":\"Flexible padding for buttons\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"name\":\"Terluin Webdesign\",\"description\":\"Let your website work for you\",\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\",\"name\":\"Terluin Webdesign\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"width\":294,\"height\":674,\"caption\":\"Terluin Webdesign\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/TerluinWebdesign\/\",\"https:\/\/x.com\/terluinwdesign\",\"https:\/\/www.instagram.com\/terluinwebdesign\/\",\"https:\/\/www.linkedin.com\/company\/terluin-webdesig\/\",\"https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\",\"name\":\"Thijs Terluin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"caption\":\"Thijs Terluin\"},\"description\":\"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thijs-terluin\/\"],\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flexible padding for buttons, using flexbox &#8211; Terluin Webdesign","description":"Make your buttons flexible by allowing the left and right padding to shrink automatically if there is less available space within containers.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/","og_locale":"en_US","og_type":"article","og_title":"Flexible padding for buttons, using flexbox &#8211; Terluin Webdesign","og_description":"Make your buttons flexible by allowing the left and right padding to shrink automatically if there is less available space within containers.","og_url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/","og_site_name":"Terluin Webdesign","article_publisher":"https:\/\/www.facebook.com\/TerluinWebdesign\/","article_published_time":"2020-09-22T18:31:14+00:00","article_modified_time":"2025-07-18T14:58:58+00:00","og_image":[{"width":1200,"height":676,"url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/flexible-padding-for-buttons.jpg","type":"image\/jpeg"}],"author":"Thijs Terluin","twitter_card":"summary_large_image","twitter_creator":"@terluinwdesign","twitter_site":"@terluinwdesign","twitter_misc":{"Written by":"Thijs Terluin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/#article","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/"},"author":{"name":"Thijs Terluin","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd"},"headline":"Flexible padding for buttons","datePublished":"2020-09-22T18:31:14+00:00","dateModified":"2025-07-18T14:58:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/"},"wordCount":4,"publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/flexible-padding-for-buttons.jpg","articleSection":["Blog","CSS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/","name":"Flexible padding for buttons, using flexbox &#8211; Terluin Webdesign","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/#primaryimage"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/flexible-padding-for-buttons.jpg","datePublished":"2020-09-22T18:31:14+00:00","dateModified":"2025-07-18T14:58:58+00:00","description":"Make your buttons flexible by allowing the left and right padding to shrink automatically if there is less available space within containers.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/flexible-padding-for-buttons\/#primaryimage","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/flexible-padding-for-buttons.jpg","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/05\/flexible-padding-for-buttons.jpg","width":1200,"height":676,"caption":"Flexible padding for buttons"},{"@type":"WebSite","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website","url":"https:\/\/www.terluinwebdesign.nl\/en\/","name":"Terluin Webdesign","description":"Let your website work for you","publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization","name":"Terluin Webdesign","url":"https:\/\/www.terluinwebdesign.nl\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","width":294,"height":674,"caption":"Terluin Webdesign"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/TerluinWebdesign\/","https:\/\/x.com\/terluinwdesign","https:\/\/www.instagram.com\/terluinwebdesign\/","https:\/\/www.linkedin.com\/company\/terluin-webdesig\/","https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ"]},{"@type":"Person","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd","name":"Thijs Terluin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","caption":"Thijs Terluin"},"description":"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.","sameAs":["https:\/\/www.linkedin.com\/in\/thijs-terluin\/"],"url":"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/comments?post=6432"}],"version-history":[{"count":1,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6432\/revisions"}],"predecessor-version":[{"id":9088,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6432\/revisions\/9088"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media\/8537"}],"wp:attachment":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media?parent=6432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/categories?post=6432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/tags?post=6432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}