{"id":7928,"date":"2018-09-28T10:30:48","date_gmt":"2018-09-28T08:30:48","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=7928"},"modified":"2025-08-20T17:17:20","modified_gmt":"2025-08-20T15:17:20","slug":"web-design-evolution-boutons","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/","title":{"rendered":"Web design&nbsp;: l\u2019\u00e9volution des boutons au fil du temps"},"content":{"rendered":"<p>Les boutons sont devenus des \u00e9l\u00e9ments ordinaires du design d\u2019interaction. Pourtant <a href=\"https:\/\/graphiste.com\/blog\/bouton-web-design\" target=\"_blank\" rel=\"noopener noreferrer\">leur aspect doit \u00eatre bien travaill\u00e9<\/a> pour qu\u2019ils soient efficaces et convertissent vos visiteurs.<\/p>\n<p>Si aujourd\u2019hui nous constatons des boutons tr\u00e8s minimalistes, cela n\u2019a pas toujours \u00e9t\u00e9 le cas. Remontons un peu le temps et voyons de plus pr\u00eat l\u2019\u00e9volution du design des boutons\u2026<\/p>\n<h2>Les boutons en 3 dimensions<\/h2>\n<p>Retour dans les ann\u00e9es 90. Cela date n\u2019est-ce pas&nbsp;? Peut-\u00eatre \u00e9tiez-vous tout juste n\u00e9(e), mais je suis certaine que vous avez connu les c\u00e9l\u00e8bres boutons en 3 dimensions.<\/p>\n<p>Pour cette \u00e9poque o\u00f9 le web n\u2019en \u00e9tait qu\u2019\u00e0 son d\u00e9but, le design des boutons \u00e9tait tout de m\u00eame bien avanc\u00e9 avec un effet d\u2019ombre et de relief.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-7930 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/bouton-3d.jpg\" alt=\"Bouton 3D\" width=\"600\" height=\"238\" \/><\/p>\n<p>L\u2019objectif dans ces temps anciens \u00e9tait de pouvoir identifier clairement une zone cliquable. Cette derni\u00e8re devait donc \u00eatre bien diff\u00e9renci\u00e9e du reste de la fen\u00eatre, d\u2019autant plus que les deux \u00e9l\u00e9ments \u00e9taient de la m\u00eame couleur.<\/p>\n<p>Avec un effet 3D l\u2019utilisateur comprenait rapidement quels \u00e9l\u00e9ments \u00e9taient interactifs.<\/p>\n<h2>Les boutons skeuomorphiques<\/h2>\n<p>Une vingtaine d\u2019ann\u00e9e plus tard (environ), les designers ont commenc\u00e9 \u00e0 cr\u00e9er des boutons skeuomorphiques, notamment gr\u00e2ce au CSS3.<\/p>\n<blockquote><p>En design, le skeuomorphisme consiste \u00e0 cr\u00e9er des \u00e9l\u00e9ments ressemblant \u00e0 l\u2019objet physique correspondant \u00e0 son usage.<\/p><\/blockquote>\n<p>Avec un tel design, l\u2019objectif \u00e9tait de faire comprendre \u00e0 l\u2019utilisateur comment utiliser l\u2019interface.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-7932 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/bouton-skeuomorphisme.jpg\" alt=\"Bouton skeuomorphisme\" width=\"450\" height=\"450\" \/><\/p>\n<p>Pour donner l\u2019impression que le bouton \u00e9tait bien r\u00e9el, les designers utilisaient des ombres, des reflets, des d\u00e9grad\u00e9s, des effets de lumi\u00e8res, etc.<\/p>\n<p>Le gris, qui \u00e9tait une couleur conventionnelle, a peu \u00e0 peu laisser place \u00e0 des couleurs plus vives. La cr\u00e9ativit\u00e9 commence \u00e0 s\u2019exprimer.<\/p>\n<h2>Place au flat design<\/h2>\n<p>Nous arrivons \u00e0 un tournant majeur de l\u2019\u00e9volution du design des boutons avec le passage au flat design. Les boutons en 3D laissent place \u00e0 des boutons plats, amenant une nouvelle reflexion.<\/p>\n<p>Si tout est plat, comment l\u2019utilisateur va-t-il reconna\u00eetre que tel \u00e9l\u00e9ment est un bouton&nbsp;? Comment garder l\u2019affordance&nbsp;?<\/p>\n<p>L\u2019un des enjeux du flat design va \u00eatre de donner des indications visuelles aux utilisateurs pour leur dire o\u00f9 cliquer. La couleur et les pictogrammes vont alors rev\u00eatir une importance particuli\u00e8re.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-7933 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/flat-design-bouton.jpg\" alt=\"Bouton flat design\" width=\"600\" height=\"523\" \/><\/p>\n<h2>L\u2019arriv\u00e9e du material design<\/h2>\n<p>Introduit par Google en 2014, le <a href=\"https:\/\/material.io\/components\/buttons\/\" target=\"_blank\" rel=\"noopener noreferrer\">material design<\/a> r\u00e9utilise des \u00e9l\u00e9ments hi\u00e9rarchiques et des <a href=\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\" target=\"_blank\" rel=\"noopener noreferrer\">animations<\/a> pour donner des indices \u00e0 l\u2019utilisateur. Les boutons ne sont plus dans l\u2019interface, mais au-dessus, gr\u00e2ce aux boutons flottants.<\/p>\n<p>L\u2019objectif est de s\u2019inspirer des objets r\u00e9els et d\u2019arriver \u00e0 un design minimaliste, avec des formes g\u00e9om\u00e9triques, color\u00e9es et sans superflus, auquel s\u2019ajoute des micro-interactions.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-7934 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/float-button.png\" alt=\"Float button\" width=\"550\" height=\"978\" \/><\/p>\n<p>Les boutons sont intuitifs, adapt\u00e9s \u00e0 tous les supports et interactifs.<\/p>\n<p>Le material design fait suite au flat design jug\u00e9 parfois simpliste et lassant.<\/p>\n<h2>Les tendances actuelles<\/h2>\n<p>Depuis peu, un nouveau style de bouton est devenu populaire&nbsp;: les boutons fant\u00f4mes.<\/p>\n<p>Leur design est tr\u00e8s simple et esth\u00e9tique&nbsp;: le bouton est transparent et est seulement compos\u00e9 d\u2019un contour d\u2019une largeur de quelques pixels.<\/p>\n<p><a href=\"https:\/\/elevennewyork.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-7935 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/ghost-button.png\" alt=\"Ghost button\" width=\"600\" height=\"236\" \/><\/a><\/p>\n<p>Enfin, vous aurez sans doute remarqu\u00e9 l\u2019apparition des boutons ovales qui constituent une alternative aux traditionnels boutons rectangulaires.<\/p>\n<p>Pour que l\u2019utilisateur rep\u00e8re ces deux types de call-to-action il convient de centrer le bouton et de laisser beaucoup de <a href=\"https:\/\/graphiste.com\/blog\/comprendre-lexique-graphiste\" target=\"_blank\" rel=\"noopener noreferrer\">padding<\/a>. La plupart d\u2019entre eux sont accompagn\u00e9s d\u2019un effet hover pour accentuer l\u2019affordance.<\/p>\n<p>Au fil du temps, le bouton est devenu de plus en plus minimaliste. Est-il vou\u00e9 \u00e0 dispara\u00eetre&nbsp;? Aujourd&#8217;hui, nombreux sont ceux qui retirent le cadre du bouton, ne laissant que le texte accompagn\u00e9 d&#8217;un ic\u00f4ne ou d&#8217;un soulignement.<\/p>\n<p><a href=\"https:\/\/www.mountainguides.is\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-7936 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/disparition-bouton.png\" alt=\"Disparition bouton\" width=\"600\" height=\"345\" \/><\/a><\/p>\n<p>Alors, quelle sera selon vous la prochaine tendance&nbsp;?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les boutons sont devenus des \u00e9l\u00e9ments ordinaires du design d\u2019interaction. Pourtant leur aspect doit \u00eatre bien travaill\u00e9 pour qu\u2019ils soient efficaces et convertissent vos visiteurs. Si aujourd\u2019hui nous constatons des boutons tr\u00e8s minimalistes, cela n\u2019a pas toujours \u00e9t\u00e9 le cas. Remontons un peu le temps et voyons de plus pr\u00eat l\u2019\u00e9volution du design des boutons\u2026 [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":7939,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-7928","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Web design : l\u2019\u00e9volution des boutons au fil du temps - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Les boutons sont devenus des \u00e9l\u00e9ments ordinaires du design d\u2019interaction. Pourtant leur aspect doit \u00eatre bien travaill\u00e9 pour qu\u2019ils soient efficaces et\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web design : l\u2019\u00e9volution des boutons au fil du temps - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Les boutons sont devenus des \u00e9l\u00e9ments ordinaires du design d\u2019interaction. Pourtant leur aspect doit \u00eatre bien travaill\u00e9 pour qu\u2019ils soient efficaces et\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2018-09-28T08:30:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:17:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/graphiste-evolution-bouton-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thomas Lazzaroni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@totolazza\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Lazzaroni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/\"},\"author\":{\"name\":\"Thomas Lazzaroni\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\"},\"headline\":\"Web design&nbsp;: l\u2019\u00e9volution des boutons au fil du temps\",\"datePublished\":\"2018-09-28T08:30:48+00:00\",\"dateModified\":\"2025-08-20T15:17:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/\"},\"wordCount\":647,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/graphiste-evolution-bouton-1.png\",\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/\",\"url\":\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/\",\"name\":\"Web design : l\u2019\u00e9volution des boutons au fil du temps - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/graphiste-evolution-bouton-1.png\",\"datePublished\":\"2018-09-28T08:30:48+00:00\",\"dateModified\":\"2025-08-20T15:17:20+00:00\",\"description\":\"Les boutons sont devenus des \u00e9l\u00e9ments ordinaires du design d\u2019interaction. Pourtant leur aspect doit \u00eatre bien travaill\u00e9 pour qu\u2019ils soient efficaces et\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/graphiste-evolution-bouton-1.png\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/graphiste-evolution-bouton-1.png\",\"width\":850,\"height\":423,\"caption\":\"Web design : \u00e9volution des boutons\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web design&nbsp;: l\u2019\u00e9volution des boutons au fil du temps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\",\"name\":\"Thomas Lazzaroni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"caption\":\"Thomas Lazzaroni\"},\"description\":\"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/\",\"https:\/\/x.com\/totolazza\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/thomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web design : l\u2019\u00e9volution des boutons au fil du temps - Graphiste Blog","description":"Les boutons sont devenus des \u00e9l\u00e9ments ordinaires du design d\u2019interaction. Pourtant leur aspect doit \u00eatre bien travaill\u00e9 pour qu\u2019ils soient efficaces et","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:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/","og_locale":"fr_FR","og_type":"article","og_title":"Web design : l\u2019\u00e9volution des boutons au fil du temps - Graphiste Blog","og_description":"Les boutons sont devenus des \u00e9l\u00e9ments ordinaires du design d\u2019interaction. Pourtant leur aspect doit \u00eatre bien travaill\u00e9 pour qu\u2019ils soient efficaces et","og_url":"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2018-09-28T08:30:48+00:00","article_modified_time":"2025-08-20T15:17:20+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/graphiste-evolution-bouton-1.png","type":"image\/png"}],"author":"Thomas Lazzaroni","twitter_card":"summary_large_image","twitter_creator":"@totolazza","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Thomas Lazzaroni","Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/"},"author":{"name":"Thomas Lazzaroni","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5"},"headline":"Web design&nbsp;: l\u2019\u00e9volution des boutons au fil du temps","datePublished":"2018-09-28T08:30:48+00:00","dateModified":"2025-08-20T15:17:20+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/"},"wordCount":647,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/graphiste-evolution-bouton-1.png","articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/","url":"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/","name":"Web design : l\u2019\u00e9volution des boutons au fil du temps - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/graphiste-evolution-bouton-1.png","datePublished":"2018-09-28T08:30:48+00:00","dateModified":"2025-08-20T15:17:20+00:00","description":"Les boutons sont devenus des \u00e9l\u00e9ments ordinaires du design d\u2019interaction. Pourtant leur aspect doit \u00eatre bien travaill\u00e9 pour qu\u2019ils soient efficaces et","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/graphiste-evolution-bouton-1.png","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/graphiste-evolution-bouton-1.png","width":850,"height":423,"caption":"Web design : \u00e9volution des boutons"},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/web-design-evolution-boutons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"Web design&nbsp;: l\u2019\u00e9volution des boutons au fil du temps"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5","name":"Thomas Lazzaroni","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","caption":"Thomas Lazzaroni"},"description":"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.","sameAs":["https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/","https:\/\/x.com\/totolazza"],"url":"https:\/\/graphiste.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/7928","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=7928"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/7928\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/7939"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=7928"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=7928"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=7928"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}