CTA ou Call To Action - Bouton en ligne gratuit

Présentation

Un CTA ou Call To Action est un élément cliquable positionné sur votre site web, qui incite l'utilisateur à effectuer une action précise.

En d'autres termes si une action est importante elle doit être 'remarquable' : bien positionnée, réactive et avec un beau design. Qu'elle attire l'oeil, sans le contrarier.

Ici nous ciblerons le bouton pour inciter à effectuer une action éventuelle. Il y a les générateurs de boutons, bien sûr, mais aussi les propositions 'clé en main'. En règle générale, ce sont ces dernières qui sont les plus belles, donc les plus performantes.

Je vous propose 40 services :

 

Générateur de bouton

Best Css Button Generator - Générateur

Caractéristiques

  • Pur CSS
  • Rollover (seul effet disponible)
  • Réglages faciles
  • Options limitées

Image cliquable pour voir l'exemple

generateur en ligne gratuit de boutons CSS

Références

Site web

[Créé / modifié] [05-12-2020 / 05-12-2020]

Bootstrap Button Generator - FrameWork Bootstrap

Nécessite la bibliothèque CSS du framework :
"https://...mdbootstrap4/css/compiled-4...?ver=4.19.2"

Caractéristiques

  • Site officiel Bootstrap
  • Les couleurs sont nommées
  • Rollover au survol
  • Réaction au clic
  • Réglages limités par oui ou non
  • Personnellement je ne trouve pas ça très pratique, de plus ce type de bouton se retrouve partout

Image cliquable pour voir l'exemple

generateur en ligne gratuit de boutons CSS

Références

Site web

[Créé / modifié] [05-12-2020 / 05-12-2020]

Css Button Creator - Générateur

Caractéristiques

  • Pur CSS
  • Rollover (seul effet disponible)
  • Ombre sur le bouton et sur le texte
  • Réglages faciles
  • Options limitées

Image cliquable pour voir l'exemple

generateur de bouton CSS en ligne avec effet d'ombrage sur le bouton et sur le texte

Références

Site web

[Créé / modifié] [06-12-2020 / 06-12-2020]

CSS Deck - Annuaire de scripts

Caractéristiques

  • Pur CSS
  • Pas de rollover
  • Vibration au clic
  • Profitez de CSS Deck qui regorge de scripts

Image cliquable pour voir l'exemple

bouton en pur CSS pour votre site web

Références

Site web

[Créé / modifié] [05-12-2020 / 05-12-2020]

Css Portal - Générateur

Caractéristiques

  • Pur CSS
  • Réglages : Texte; Bouton; Bordure; Fond.
  • Rollover (seul effet disponible)
  • Il faudra gérer le souligné
  • Profitez de CSS Portal qui présente beaucoup de générateurs, d'outils et de ressources CSS

Image cliquable pour voir l'exemple

generateur de bouton CSS

Références

Site web

[Créé / modifié] [05-12-2020 / 05-12-2020]

Doodle Nerd - Générateur

Caractéristiques

  • Pur CSS
  • Réglages : Texte; Bouton; Bordure; Fond.
  • Rollover (seul effet disponible)
  • Il faudra gérer le souligné

Image cliquable pour voir l'exemple

bouton en pur CSS avec rollover

Site web

[Créé / modifié] [05-12-2020 / 05-12-2020]

 

Bouton simple

Deacy Chris 2 - Boutons et couleur

- Et si c'était ça la solution, une réaction au survol avec un liseret de couleur ?

Caractéristiques

  • CSS, jQuery, pas de Javascript
  • Réaction au survol avec deux solutions : liseret défilant coloré ou remplissage coloré
  • Solution simple et efficace

Image cliquable pour voir l'exemple

bouton avec rollover et jeux de couleurs

Références

Site web

[Créé / modifié] [21-03-2021 / 21-03-2021]

Gupta Ramkirat - Pur CSS

Caractéristiques

  • Simple rollover
  • CSS pur
  • Je me dis pourquoi faire plus compliqué !

Image cliquable pour voir l'exemple

rollover sur un meme bouton

Références

Site web

[Créé / modifié] [09-01-2021 / 09-01-2021]

G. Notario Carlos - Espagne

Développeur créatif, spécialiste 3D

Caractéristiques

  • CSS, JS, jQuery
  • Effet cubique de rotation 3D
  • Réagit au survol
  • J'ai été obligé de mettre 'width' à 24% au lieu de 25% pour que cela fonctionne: "$(".twist").css("width", "24%").css("width", "+=3px");"

Image cliquable pour voir l'exemple

rotation 3D sur bouton CSS

Références

Site web

Site de l'auteur

[Créé / modifié] [05-12-2020 / 04-02-2021]

Meyrick Luke - Expatrié britannique vivant à Sydney

Caractéristiques

  • Pur CSS
  • Encadrement du lien au survol, ce qui lui donne l'importance voulue dans le cas du CTA
  • De plus il y a un recentrage du texte
  • Simple et très très efficace

Image cliquable pour voir l'exemple

bouton en pur CSS avec encadrement au survol

Références

Site web

Site de l'auteur

[Créé / modifié] [06-12-2020 / 06-12-2020]

Nieves Christian - Denver, Colorado

Caractéristiques

  • Pur CSS
  • 6 Rollovers 'doux'
  • Choix judicieux et agréable

Image cliquable pour voir l'exemple

boutons en pur avec belles transitions

Références

Site web

Site de l'auteur

[Créé / modifié] [04-02-2021 / 04-02-2021]

Pedrick Evan

Caractéristiques

  • Pur CSS
  • Série de 8 animations
  • Toutes réagissent au survol de manière différente
  • Toutes réagissent au clic de la même manière
  • Jolie sélection

Image cliquable pour voir l'exemple

animations en pur CSS d'un bouton avec reaction au survol et au clic

Références

Site web

[Créé / modifié] [22-01-2021 / 22-01-2021]

Roberts Rebecca -

Caractéristiques

  • Pur CSS
  • 20 Rollovers
  • Excellent résumé de ce que l'on peut faire sans changer la forme du bouton

Image cliquable pour voir l'exemple

boutons en pur avec belles transitions

Références

Site web

[Créé / modifié] [04-02-2021 / 04-02-2021]

Saud Nour - Enchantement

Caractéristiques

  • CSS, JS, rien d'autre
  • Pas de rollover mais un effet pétillant au clic
  • San Francisco, Californie, USA

Image cliquable pour voir l'exemple

effet petillant au clic

Références

Site web

Site de l'auteur

[Créé / modifié] [11-11-2021 / 11-11-2021]

Treur Robin - Transitions

Caractéristiques

  • Panel de transitions
  • CSS pur
  • Rollovers différents sur un même exemple

Image cliquable pour voir l'exemple

rollover sur un meme bouton

Références

Site web

[Créé / modifié] [09-01-2021 / 09-01-2021]

Yuhomyan - Pur CSS

Caractéristiques

  • 16 animations, toutes différentes
  • Animation de bouton de couleur bonbon
  • CSS pur

Image cliquable pour voir l'exemple

16 animations couleur bonbon

Références

Site web

[Créé / modifié] [23-02-2021 / 23-02-2021]

 

Bouton "On / Off" (switch)

Bork Peter - Danemark

Caractéristiques

  • CSS, jQuery
  • Interrupteur avec légère lumière fluo
  • Réagit au clic

Image cliquable pour voir l'exemple

bouton interrupteur bascule

Références

Site web

[Créé / modifié] [12-10-2021 / 12-10-2021]

Giraudel Kitty

Caractéristiques

  • Pur CSS
  • Pas de rollover
  • Beau r?alisme sans image
  • Berlin, Allemagne

Image cliquable pour voir l'exemple

bouton day-night, jour-nuit en pure css

Références

Site web

[Créé / modifié] [29-10-2021 / 29-10-2021]

Kadosh Yoav - Israel

Caractéristiques

  • Pur CSS
  • Bouton rouge réaliste (switch)
  • Mouvement de bascule superbe !

Image cliquable pour voir l'exemple

bouton rouge realiste (switch)

Références

Site web

[Créé / modifié] [31-07-2021 / 31-07-2021]

Kantner Jon - Pennsylvanie, USA

Caractéristiques

  • Pur CSS
  • Bouton rouge réaliste (switch)
  • Écrasement au clic

Image cliquable pour voir l'exemple

bouton rouge on/off (switch)

Références

Site web

[Créé / modifié] [12-10-2021 / 12-10-2021]

Kantner Jon - 2 - Pennsylvanie, USA

Caractéristiques

  • Pur CSS
  • Bloc interrupteur
  • Réagit au clic

Image cliquable pour voir l'exemple

bouton interrupteur

Références

Site web

[Créé / modifié] [12-10-2021 / 12-10-2021]

Kantner Jon - 3 - Pennsylvanie, USA

Caractéristiques

  • Pur CSS
  • Interrupteur à bascule
  • Réagit au clic

Image cliquable pour voir l'exemple

bouton interrupteur bascule

Références

Site web

[Créé / modifié] [12-10-2021 / 12-10-2021]

Mulligan Ryan

Caractéristiques

  • CSS quasi pur, JS
  • Interrupteur avec animation au premier affichage
  • Publie sous CSS-Tricks
  • Denver, Co, USA

Image cliquable pour voir l'exemple

bouton interrupteur en CSS quasi pur

Références

Site web

Site de l'auteur

[Créé / modifié] [05-11-2021 / 05-11-2021]

Vinther Dannie

Caractéristiques

  • CSS, JS, rien d'autre
  • La couleur envahit le bouton dans un premier temps puis le symbole change de manière animée
  • Copenhague, Danemark

Image cliquable pour voir l'exemple

interrupteur a bascule en CSS et JS

Références

Site web

[Créé / modifié] [11-11-2021 / 11-11-2021]

 

Bouton "Jour / Nuit"

Bongers Chris

Caractéristiques

  • Boutons pour changer la couleur du fond d'écran
  • Pur CSS
  • Pas de rollover
  • Clic sur le bouton
  • Belle symbolique : soleil et lune
  • Vit à Cape Town, Afrique du Sud mais ses racines sont aux Pays-Bas

Image cliquable pour voir l'exemple

bouton day-night, jour-nuit en pure css

Références

Site web

Site de l'auteur

[Créé / modifié] [28-10-2021 / 28-10-2021]

Ceylan Aybuke

- Reste malgré tout trop gros, surtout en mode mobile

Caractéristiques

  • Boutons pour changer la couleur du fond d'écran
  • Pur CSS ou presque
  • Pas de rollover
  • Clic sur le bouton
  • Belle symbolique : soleil et lune
  • Beau déplacement de la bille centrale
  • Izmir, Turquie

Image cliquable pour voir l'exemple

bouton day-night, jour-nuit en css-js

Références

Site web

[Créé / modifié] [28-10-2021 / 28-10-2021]

Fagnan Matthew

Caractéristiques

  • Boutons pour changer la couleur du fond d'écran
  • Pur CSS
  • Pas de rollover
  • On peut cliquer sur toute la page
  • Belle symbolique : soleil et lune
  • Edmonton, Alberta, Canada

Image cliquable pour voir l'exemple

bouton day-night, jour-nuit en pure css

Références

Site web

[Créé / modifié] [28-10-2021 / 28-10-2021]

Gardner Steve

Caractéristiques

  • CSS, JS, Gsap.js
  • Le bouton est animé en permanence : étoiles et nuages
  • On a l'impression lorsque l'on clique sur le jour, par exemple, qu'il encercle la nuit pour l'éteindre
  • Royaume-Uni

Image cliquable pour voir l'exemple

bouton jour nuit construit avec gsap.js

Références

Site web

Site de l'auteur

[Créé / modifié] [11-11-2021 / 11-11-2021]

Kantner Jon - 4

- Reste malgré tout trop gros, surtout en mode mobile

Caractéristiques

  • CSS, JS
  • Interrupteur neumorphique à mouvement
  • À tirer vers le bas ou pousser vers le haut
  • Pennsylvanie, USA

Image cliquable pour voir l'exemple

bouton interrupteur neumorphique

Références

Site web

[Créé / modifié] [29-10-2021 / 29-10-2021]

Simon Gary

- La perfection

Caractéristiques

  • CSS, JS
  • Interrupteur avec animation
  • Présentation nickel
  • Simon Gary de Design Course. Girard, Ohio, USA

Image cliquable pour voir l'exemple

bouton interrupteur en simple CSS et JS

Références

Site web

[Créé / modifié] [05-11-2021 / 05-11-2021]

 

Bouton "Envoi", "Add to cart"

Iker Aaron - Add to cart

Caractéristiques

  • Bouton d'ajout au panier pour site de vente en ligne
  • CSS, JS, Gsap.js, MorphSVGPlugin3.js
  • Il faut s'être inscrit pour utiliser : MorphSVGPlugin3.js
  • Pas de rollover
  • Réaction au clic avec mise au panier d'un tee shirt qui s'extrait du bouton
  • Munster, Allemagne

Image cliquable pour voir l'exemple

bouton d'ajout au panier pour site de vente en ligne

Références

Site web

Site de l'auteur

[Créé / modifié] [11-11-2021 / 11-11-2021]

Couch Jesse - Add to cart

Caractéristiques

  • Bouton d'ajout au panier pour site de vente en ligne
  • CSS, JS, jQuery
  • Pas de rollover
  • Réaction au clic avec envoi au bouton panier qui s'incrémente et s'anime
  • Roanoke, Virginie, USA

Image cliquable pour voir l'exemple

boutons d'envoi

Références

Site web

[Créé / modifié] [05-11-2021 / 05-11-2021]

Khan Asfandiyar - Add to cart

Caractéristiques

  • Bouton d'ajout au panier pour site de vente en ligne
  • CSS, JS, jQuery
  • Pas de rollover
  • Réaction au clic puis ex?cution de l'animation
  • Émule d'Aaron Iker
  • Berlin

Image cliquable pour voir l'exemple

bouton d'ajout au panier

Références

Site web

[Créé / modifié] [01-08-2021 / 01-08-2021]

Sanjaya Dilum - Message

Caractéristiques

  • Bouton d'envoi
  • CSS, JS, GSAP, nécessite un compte pour utiliser "DrawSVGPlugin3.min.js"
  • Pas de rollover
  • Réaction au clic puis validation avec animation
  • Jolie proposition
  • Sri Lanka

Image cliquable pour voir l'exemple

boutons d'envoi

Références

Site web

Site de l'auteur

[Créé / modifié] [01-08-2021 / 01-08-2021]

Wheatup San - Message

Caractéristiques

  • Bouton d'envoi
  • CSS pur
  • Le carré de départ se transforme en avion de papier qui s'envole... et revient
  • Magnifique proposition
  • Yokohama, Japon

Image cliquable pour voir l'exemple

bouton d'envoi de courrier

Références

Site web

[Créé / modifié] [12-10-2021 / 12-10-2021]

 

Système de boutons pour "Menu"

Connor (CKH4) - Menu

Caractéristiques

  • Pur CSS
  • Le bouton réagit au clic et développe un menu vertical
  • Léger rollover sur le bouton et sur la ligne de menu
  • Animation (rotation jusqu'à la croix) du bouton au clic
  • Réalisation moderne et attrayante
  • 3 exemples sont présentés

Image cliquable pour voir l'exemple

animation en pur CSS d'un bouton avec affichage d'un menu

Références

Site web

[Créé / modifié] [22-01-2021 / 22-01-2021]

Kuri Kowshik - Menu

Caractéristiques

  • CSS, Bootstrap.css, JS, jQuery
  • Le bouton réagit au clic et développe un menu vertical
  • Léger rollover horizontal sur chaque ligne de menu
  • Animation (rotation de la croix jusqu'au plus)
  • Mirpur, Dhaka, Bangladesh

Image cliquable pour voir l'exemple

animation en mode menu pour un CTA

Références

Site web

Site de l'auteur

[Créé / modifié] [29-01-2021 / 29-01-2021]

Tran Sasha - Menu

Caractéristiques

  • Pur CSS
  • Le bouton réagit au clic et développe un menu vertical
  • Léger rollover sur la ligne de menu
  • Animation (rotation de la croix jusqu'au plus)
  • Tout en délicatesse
  • San Francisco, CA, USA

Image cliquable pour voir l'exemple

animation en pure CSS d'un menu pour mobile

Références

Site web

Site de l'auteur

[Créé / modifié] [29-01-2021 / 29-01-2021]

Tran Sasha - Menu (2)

Caractéristiques

  • CSS, JS, jQuery
  • Le bouton réagit au clic et développe un menu vertical
  • Affichage progressif des lignes de menu
  • L'animation du bouton semble pousser les lignes de menu vers le bas
  • San Francisco, CA, USA

Image cliquable pour voir l'exemple

animation simple d'un menu pour mobile

Références

Site web

Site de l'auteur

[Créé / modifié] [29-01-2021 / 29-01-2021]

 

Bouton "Autre"

Petrovic Nikola - Livre

- Je vous présente une oeuvre d'art !

Caractéristiques

  • Pur CSS
  • Au survol, un livre s'ouvre pour accéder au service
  • On voit les pages tourner
  • Superbe animation

Image cliquable pour voir l'exemple

animation en pur CSS d'un livre qui s'ouvre avec les pages qui tournent

Références

Site web

[Créé / modifié] [19-04-2021 / 19-04-2021]