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 24 services :

 

creer un bouton gratuitement

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]

Burna DLX

Caractéristiques

  • CSS, Normalize.css, Ionicons.css, JS, Prefixfree.js, jQuery
  • L'icône 'envoyer' s'envole pour revenir en 'validation' avec un 'V' vert
  • Réaction au clic
  • Effet d'écrasement au clic
  • Solution très originale
  • Karlsruhe, Baden-Wurttemberg

Image cliquable pour voir l'exemple

Bouton envoi tres original

Références

Site web

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

Deacy Chris - Boutons pour réseau social

Caractéristiques

  • CSS pur
  • Réaction au survol avec inversion des couleurs et transition 'énergique'
  • Solution très fraîche

Image cliquable pour voir l'exemple

bouton avec rollover pour resau social

Références

Site web

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

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]

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]

Connor (CKH4)

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]

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]

Treur Robin - 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]

Holmstrom Moses alias Thykka - Finlande

Caractéristiques

  • Pur CSS
  • Dédoublement au survol et changement de couleur pour l'élément sélectionné
  • Sous menu très original
  • Pour les deux boutons de droite : phénomène de compensation

Image cliquable pour voir l'exemple

bouton en pur CSS phenomene de dedoublement au survol

Références

Site web

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

Gannon Chris - Hampshire, UK

Caractéristiques

  • CSS, JS, TweenMax.js, MorphSVGPlugin.js
  • La couleur passe, en se modifiant, d'un bouton à l'autre comme un liant
  • Elle donne un effet 'travsersant' lorsque l'on clique sur un bouton non adjacent
  • Pour les deux boutons de droite : phénomène de compensation

Image cliquable pour voir l'exemple

la couleur traverse les boutons

Références

Site web

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

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]

Madra Pali - Chandigarh, India

Caractéristiques

  • Pur CSS
  • Rollover
  • Écrasement au clic
  • Très jolis boutons

Image cliquable pour voir l'exemple

bouton en pur CSS avec ecrasement au clic

Références

Site web

[Créé / modifié] [05-12-2020 / 05-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]

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]

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]

Petrovic Nikola

- 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]

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]

Tran Sasha - San Francisco, United States

Caractéristiques

  • Boutons pour les réseaux sociaux
  • CSS, SCSS, jQuery
  • Pas de rollover
  • Effet 'gluant' très original
  • Jolie proposition

Image cliquable pour voir l'exemple

boutons pour reseaux sociaux

Références

Site web

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

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]

Yuhomyan 2 - Pur CSS

Caractéristiques

  • 16 animations, toutes différentes
  • Animations neumorphiques
  • CSS pur

Image cliquable pour voir l'exemple

dessins d'animation neumorphique

Références

Site web

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