{"id":7776,"date":"2018-09-14T10:30:28","date_gmt":"2018-09-14T08:30:28","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=7776"},"modified":"2025-08-20T17:17:20","modified_gmt":"2025-08-20T15:17:20","slug":"animations-css-dynamiser-boutons","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/","title":{"rendered":"Inspiration : 15 animations CSS pour dynamiser vos call-to-action"},"content":{"rendered":"

Les call-to-action ont un r\u00f4le essentiel puisqu’ils vous permettent de convertir les visiteurs de votre site.<\/p>\n

Nous avons d\u00e9j\u00e0 vu que l’efficacit\u00e9 d’un CTA d\u00e9pend de son design et nous vous avons fournit quelques conseils pour perfectionner le design de vos boutons<\/a>.<\/p>\n

Mais si cela ne suffit pas \u00e0 inciter au clic, pourquoi ne pas ajouter de l’animation<\/a> pour attirer l’attention de vos visiteurs ? Laissez vous inspirer par notre s\u00e9lection de 15 animations CSS pour vos boutons.<\/p>\n

Mouvement autour du bouton<\/a><\/h2>\n

Cette micro-interaction se compose de deux ronds bougeant autour de votre bouton.<\/p>\n

Attir\u00e9s par ce mouvement, vos visiteurs passeront plus facilement la souris sur le texte, de dernier prenant alors la forme d’un v\u00e9ritable bouton.<\/p>\n

See the Pen UI Button Hover Effect #2<\/a> by Daniel Gonzalez (@dan10gc<\/a>) on CodePen<\/a>.<\/p>\n

Effet zoom<\/a><\/h2>\n

Ce bouton laissera appara\u00eetre un reflet dans le coin sup\u00e9rieur gauche du bouton et le texte sera zoom\u00e9 au passage de la souris. De quoi inciter votre visiteur \u00e0 cliquer sur votre CTA.<\/p>\n

See the Pen Shiny button <\/a> by Antonio (@conlaccento<\/a>) on CodePen<\/a>.<\/p>\n

Style cartoon<\/a><\/h2>\n

Le design d’un bouton est important alors donnez lui un style cartoon pour vous d\u00e9marquer.<\/p>\n

La micro-interaction au passage de la souris est \u00e9galement tr\u00e8s incitative.<\/p>\n

See the Pen CSS BUTTON HOVER <\/a> by Imran Pardes (@folaad<\/a>) on CodePen<\/a>.<\/p>\n

Bouton de t\u00e9l\u00e9chargement anim\u00e9<\/a><\/h2>\n

Surprenez vos visiteurs avec ce bouton de t\u00e9l\u00e9chargement sophistiqu\u00e9.<\/p>\n

En cliquant dessus, le bouton se transforme en chargeur circulaire pour montrer la progression du t\u00e9l\u00e9chargement. Remarquez le bouton d’arr\u00eat pour \u00e9ventuellement arr\u00eater le t\u00e9l\u00e9chargement. \u00c0 la fin, vous obtenez un message de confirmation indiquant que le t\u00e9l\u00e9chargement a r\u00e9ussi.<\/p>\n

See the Pen download button animation<\/a> by Denis Pasko (@faustdp<\/a>) on CodePen<\/a>.<\/p>\n

Formulaire cach\u00e9<\/a><\/h2>\n

Poussez vos visiteurs \u00e0 l’action tout en douceur.<\/p>\n

Le formulaire pour saisir son adresse email n’appara\u00eet que lorsque l’on clique sur le bouton.<\/p>\n

See the Pen Email Optin<\/a> by Adam Rasheed (@adamrasheed<\/a>) on CodePen<\/a>.<\/p>\n

Effet gluant<\/a><\/h2>\n

En plus de laisser appara\u00eetre vos r\u00e9seaux sociaux au clic de la souris, ajoutez un effet gluant. Surprise garantie.<\/p>\n

See the Pen SVG Filter Gooey Share, Social Media Button<\/a> by Sasha (@sashatran<\/a>) on CodePen<\/a>.<\/p>\n

Animation de l’ic\u00f4ne d’envoi<\/a><\/h2>\n

Pour confirmer l’envoi d’une donn\u00e9, ne vous contentez pas d’un simple message de confirmation.<\/p>\n

Vous pouvez aller plus loin en animant votre ic\u00f4ne pour symboliser concr\u00e8tement que le document a \u00e9t\u00e9 envoy\u00e9.<\/p>\n

See the Pen Submit Button Animation<\/a> by burnaDLX (@burnaDLX<\/a>) on CodePen<\/a>.<\/p>\n

Barre de chargement<\/a><\/h2>\n

Pour faire patienter votre utilisateur lors d’un t\u00e9l\u00e9chargement, transformez votre bouton en barre de progression. \u00c9videmment, n’oubliez pas de lui confirmer que le t\u00e9l\u00e9chargement \u00e0 r\u00e9ussi.<\/p>\n

See the Pen ajax load button animation<\/a> by ianchouinard (@ianchouinard<\/a>) on CodePen<\/a>.<\/p>\n

Bouton multi-message<\/a><\/h2>\n

En g\u00e9n\u00e9ral un CTA \u00e9quivaut \u00e0 une action. Mais si vous souhaitez un site vraiment d\u00e9cal\u00e9 vous pouvez casser les codes avec ce bouton qui propose plusieurs messages au fur et \u00e0 mesure que l’on clique dessus.<\/p>\n

Les petites bulles de couleurs ajoutent de l’interactivit\u00e9 et am\u00e8nent un peu plus de fantaisie.<\/p>\n

See the Pen The uncomfortable btn<\/a> by Lewi Hussey (@Lewitje<\/a>) on CodePen<\/a>.<\/p>\n

\u00c0 lire aussi : CTA : 6 erreurs courantes qui vous font perdre des conversions<\/a><\/p><\/blockquote>\n

Bouton fait main<\/a><\/h2>\n

Mettez de la personnalit\u00e9 dans votre site gr\u00e2ce \u00e0 ces boutons qui semblent dessin\u00e9s \u00e0 la main. Vous pouvez m\u00eame choisir votre style d’encadrement.<\/p>\n

See the Pen Imperfect Buttons<\/a> by Tiffany Rayside (@tmrDevelops<\/a>) on CodePen<\/a>.<\/p>\n

Effet d’encadrement<\/a><\/h2>\n

Vous pensez qu’il s’agit d’un simple lien ? D\u00e9trompez-vous. C’est un v\u00e9ritable bouton et pour qu’il prenne forme il suffit de passer la souris dessus.<\/p>\n

See the Pen Button Hover Draw – CSS Only<\/a> by Luke Meyrick (@lukemeyrick<\/a>) on CodePen<\/a>.<\/p>\n

Effet de d\u00e9doublement<\/a><\/h2>\n

D\u00e9doublez votre bouton en plusieurs ic\u00f4nes au passage de la souris. Votre visiteur pourra alors choisir le bon r\u00e9seau social.<\/p>\n

See the Pen Untitled<\/a> by thykka (@thykka<\/a>) on CodePen<\/a>.<\/p>\n

Effet glitch<\/a><\/h2>\n

Pour les passionn\u00e9s du glitch vous pouvez transformer votre bouton en scanner lors du passage de la souris.<\/p>\n

See the Pen Untitled<\/a> by Saijo George (@SaijoGeorge<\/a>) on CodePen<\/a>.<\/p>\n

Animations diverses<\/a><\/h2>\n

Nous terminons cette s\u00e9lection avec diverses animations possibles sur vos boutons lors du passage de la souris.<\/p>\n

Ces animations<\/a> sont simples mais suffisent \u00e0 ajouter de l’interactivit\u00e9 sur votre site.<\/p>\n

See the Pen Button Animation<\/a> by Evan Pedrick (@eped22<\/a>) on CodePen<\/a>.<\/p>\n

\u00c0 lire aussi : Web Design : Le guide complet sur l’animation<\/a><\/p><\/blockquote>\n

Notre astuce pour cr\u00e9er des CTA originaux en CSS<\/h2>\n

Pour cr\u00e9er des CTA originaux et pour augmenter le taux de conversion de vos pages, faites appel \u00e0 un webdesigner<\/a> pour les concevoir et les mettre en place sur votre site.<\/p>\n

D\u00e9posez un projet gratuitement sur Graphiste.com pour trouver un freelance en mesure de r\u00e9aliser votre projet !<\/p>\n","protected":false},"excerpt":{"rendered":"

Les call-to-action ont un r\u00f4le essentiel puisqu’ils vous permettent de convertir les visiteurs de votre site. Nous avons d\u00e9j\u00e0 vu que l’efficacit\u00e9 d’un CTA d\u00e9pend de son design et nous vous avons fournit quelques conseils pour perfectionner le design de vos boutons. Mais si cela ne suffit pas \u00e0 inciter au clic, pourquoi ne pas […]<\/p>\n","protected":false},"author":5,"featured_media":48905,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[102],"tags":[55],"class_list":["post-7776","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design","tag-inspiration"],"acf":[],"yoast_head":"\nInspiration : 15 animations CSS pour dynamiser vos call-to-action - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"Les call-to-action ont un r\u00f4le essentiel puisqu'ils vous permettent de convertir les visiteurs de votre site. Nous avons d\u00e9j\u00e0 vu que l'efficacit\u00e9 d'un CTA\" \/>\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\/animations-css-dynamiser-boutons\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Inspiration : 15 animations CSS pour dynamiser vos call-to-action - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"Les call-to-action ont un r\u00f4le essentiel puisqu'ils vous permettent de convertir les visiteurs de votre site. Nous avons d\u00e9j\u00e0 vu que l'efficacit\u00e9 d'un CTA\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-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-14T08:30:28+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\/call-to-action-animation-css.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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/\"},\"author\":{\"name\":\"Thomas Lazzaroni\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\"},\"headline\":\"Inspiration : 15 animations CSS pour dynamiser vos call-to-action\",\"datePublished\":\"2018-09-14T08:30:28+00:00\",\"dateModified\":\"2025-08-20T15:17:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/\"},\"wordCount\":844,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/call-to-action-animation-css.png\",\"keywords\":[\"Inspirez-vous\"],\"articleSection\":[\"UI design\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/\",\"url\":\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/\",\"name\":\"Inspiration : 15 animations CSS pour dynamiser vos call-to-action - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/call-to-action-animation-css.png\",\"datePublished\":\"2018-09-14T08:30:28+00:00\",\"dateModified\":\"2025-08-20T15:17:20+00:00\",\"description\":\"Les call-to-action ont un r\u00f4le essentiel puisqu'ils vous permettent de convertir les visiteurs de votre site. Nous avons d\u00e9j\u00e0 vu que l'efficacit\u00e9 d'un CTA\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/call-to-action-animation-css.png\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/call-to-action-animation-css.png\",\"width\":850,\"height\":423},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-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\":\"UI design\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/ui-design\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Inspiration : 15 animations CSS pour dynamiser vos call-to-action\"}]},{\"@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:\/\/totolazza.com\",\"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":"Inspiration : 15 animations CSS pour dynamiser vos call-to-action - Graphiste Blog","description":"Les call-to-action ont un r\u00f4le essentiel puisqu'ils vous permettent de convertir les visiteurs de votre site. Nous avons d\u00e9j\u00e0 vu que l'efficacit\u00e9 d'un CTA","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\/animations-css-dynamiser-boutons\/","og_locale":"fr_FR","og_type":"article","og_title":"Inspiration : 15 animations CSS pour dynamiser vos call-to-action - Graphiste Blog","og_description":"Les call-to-action ont un r\u00f4le essentiel puisqu'ils vous permettent de convertir les visiteurs de votre site. Nous avons d\u00e9j\u00e0 vu que l'efficacit\u00e9 d'un CTA","og_url":"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2018-09-14T08:30:28+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\/call-to-action-animation-css.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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/"},"author":{"name":"Thomas Lazzaroni","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5"},"headline":"Inspiration : 15 animations CSS pour dynamiser vos call-to-action","datePublished":"2018-09-14T08:30:28+00:00","dateModified":"2025-08-20T15:17:20+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/"},"wordCount":844,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/call-to-action-animation-css.png","keywords":["Inspirez-vous"],"articleSection":["UI design"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/","url":"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/","name":"Inspiration : 15 animations CSS pour dynamiser vos call-to-action - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/call-to-action-animation-css.png","datePublished":"2018-09-14T08:30:28+00:00","dateModified":"2025-08-20T15:17:20+00:00","description":"Les call-to-action ont un r\u00f4le essentiel puisqu'ils vous permettent de convertir les visiteurs de votre site. Nous avons d\u00e9j\u00e0 vu que l'efficacit\u00e9 d'un CTA","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-boutons\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/call-to-action-animation-css.png","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/09\/call-to-action-animation-css.png","width":850,"height":423},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/animations-css-dynamiser-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":"UI design","item":"https:\/\/graphiste.com\/blog\/webdesign\/ui-design\/"},{"@type":"ListItem","position":4,"name":"Inspiration : 15 animations CSS pour dynamiser vos call-to-action"}]},{"@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:\/\/totolazza.com","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\/7776","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=7776"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/7776\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/48905"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=7776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=7776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=7776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}