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

Hao (Wheatup)

Caractéristiques

  • CSS, JS, rien d'autre
  • Réaction au survol (non uniforme)
  • Réaction au clic
  • Magnifique bouton !
  • Yokohama, Japon

Image cliquable pour voir l'exemple

bouton superbe en CSS et JS

Références

Site web

[Créé / modifié] [14-02-2022 / 14-02-2022]

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]

PowellKevin

Caractéristiques

  • CSS, JS
  • Rollover: la forme se comble avec la couleur des bords
  • 2 paramètres: La taille de la bordure et la profondeur des 2 coins tronqués
  • Montréal, Canada

Image cliquable pour voir l'exemple

boutons en pur avec belles transitions

Références

Site web

Site de l'auteur

[Créé / modifié] [10-08-2022 / 10-08-2022]

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

Caractéristiques

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

Image cliquable pour voir l'exemple

bouton rouge realiste (switch)

Références

Site web

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

Kadosh Yoav (2)

Caractéristiques

  • Pur CSS
  • Le switch orange en glissant provoque l'écrasement de la partie arrière
  • Mouvement de bascule superbe !

Image cliquable pour voir l'exemple

bouton orange realiste (switch)

Références

Site web

[Créé / modifié] [14-02-2022 / 14-02-2022]

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]

Khan Asfandiyar (2)

Caractéristiques

  • Pur CSS
  • Pas de rollover
  • Au clic le bouton glisse et s'illumine
  • De plus un halo scintillant l'entoure
  • Berlin, Allemagne

Image cliquable pour voir l'exemple

bouton on/off a glissement

Références

Site web

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

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]

Proto.io

Caractéristiques

  • CSS pur
  • Pas de rollover
  • Au clic le bouton bascule. C'est simple, propre et efficace
  • Les paramètres sont modifiables avant de récupérer le code
  • Société de service qui propose quelques "freebies"

Image cliquable pour voir l'exemple

interrupteur a bascule en CSS pur

Références

Site web

[Créé / modifié] [10-08-2022 / 10-08-2022]

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]

Brynjulfsen Havard

- Nécessite absolument: stopExecutionOnTimeout - 1b93190375 e9ccc259df3a57 c1abc0e64599724 ae30d7ea4c6877 eb615f89387.js

Caractéristiques

  • CSS, JS
  • Rollover sur les lignes de menu
  • Clic sur le bouton avec curseur de positionnement
  • Trois thèmes: Clair; Foncé; Noir
  • Bergen, Norvège

Image cliquable pour voir l'exemple

bouton jour-nuit en css-js

Références

Site web

Site de l'auteur

[Créé / modifié] [27-07-2022 / 27-07-2022]

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]

Emran Ahmad

Caractéristiques

  • CSS, JS
  • Pas de rollover
  • Très joli fondu
  • Amman - Jordanie

Image cliquable pour voir l'exemple

bouton jour-nuit CSS/JS

Références

Site web

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

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]

Oliva Alonso Ricardo

Caractéristiques

  • CSS pur
  • Pas de rollover
  • On peut cliquer sur toute la page
  • C'est sûr il est gros... mais il est quand même très beau

Image cliquable pour voir l'exemple

bouton jour-nuit CSS pur

Références

Site web

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

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]

Turk Aysenur

- Nécessite absolument: stopExecutionOnTimeout - 1b93190375 e9ccc259df3a57 c1abc0e64599724 ae30d7ea4c6877 eb615f89387.js

Caractéristiques

  • CSS, JS, jQuery
  • Animation
  • Clic sur le bouton avec changement d'état: Lune, soleil
  • Deux thèmes: Jour avec le soleil qui descend et la clarté qui inonde; Nuit avec la lune qui se lève et la lumière dans la maison qui s'allume
  • Izmir, Turquie

Image cliquable pour voir l'exemple

bouton jour-nuit avec de tres belles animations

Références

Site web

[Créé / modifié] [27-07-2022 / 27-07-2022]

 

Bouton "Envoi de message", "Add to cart"

Brown Kieran - Add to cart

Caractéristiques

  • Bouton d'ajout au panier pour site de vente en ligne
  • CSS, Normalize.css, JS
  • Léger rollover
  • Réaction au clic avec réception de colis dans le panier, changement de couleur et affichage d'un "V" de validation. Retour à l'état normal tout de suite après
  • Manchester, Angleterre

Image cliquable pour voir l'exemple

bouton d'ajout de marchandise au panier

Références

Site web

[Créé / modifié] [25-01-2022 / 25-01-2022]

Caruso Nico - Message

Caractéristiques

  • Bouton d'envoi
  • CSS pur
  • L'avion décolle au rollover
  • Réaction au clic avec disparition fine et rapide de l'avion
  • Jolie proposition

Image cliquable pour voir l'exemple

bouton d'envoi avec fichier SVG

Références

Site web

[Créé / modifié] [01-01-2022 / 01-01-2022]

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]

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]

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]

Minz Code - Add to cart

Caractéristiques

  • Bouton d'ajout au panier
  • CSS, JS, rien d'autre
  • Rollover sur le bouton qui s'assombrit
  • Au clic, le bouton s'écrase, la chariot arrive par la gauche, se remplit puis s'efface par la droite
  • Un message d'ajout apparaît à la fin
  • Israël

Image cliquable pour voir l'exemple

bouton d'ajout au panier en CSS et JS

Références

Site web

[Créé / modifié] [04-03-2022 / 04-03-2022]

Moyal Eli - Message

Caractéristiques

  • Bouton d'envoi de message
  • CSS pur, aucune dépendance
  • Rollover sur le bouton
  • Au clic, l'enveloppe se détricotte pour fabriquer un avion qui s'envole et disparait. Retour à l'état antérieur par clic
  • Israël

Image cliquable pour voir l'exemple

bouton d'envoi de mail

Références

Site web

[Créé / modifié] [25-01-2022 / 25-01-2022]

Radulovic Anastasija - Message

Caractéristiques

  • Bouton d'envoi de message
  • CSS, JS
  • Pas de rollover
  • Au clic, l'avion s'envole et disparait, puis le "V" de validation s'affiche. Pas de retour à l'état antérieur
  • Belgrade, Serbie

Image cliquable pour voir l'exemple

bouton d'envoi de message

Références

Site web

[Créé / modifié] [25-01-2022 / 25-01-2022]

Sancoza Sandra - Message

Caractéristiques

  • Bouton d'envoi
  • CSS, JS, Gsap.js
  • Pas de rollover ni de réaction au clic
  • 3 étapes: Attente; Le bouton se transforme en barre horizontale, qui se transforme en barre verticale pour s'envoler comme une fusée. S'ensuit un message de remerciement
  • Novi Sad, Serbie

Image cliquable pour voir l'exemple

bouton d'envoi avec trois etapes

Références

Site web

[Créé / modifié] [01-01-2022 / 01-01-2022]

Sanjaya Dilum - Message

- Attention de bien cliquer sur l'avion, càd la partie droite du bouton, pour déclencher

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]

Singh Satyam - Message

Caractéristiques

  • Bouton d'envoi
  • CSS, JS, jQuery
  • Pas de rollover ni de réaction au clic
  • 3 étapes: Attente; En cours; Envoyé
  • Noida, Inde

Image cliquable pour voir l'exemple

bouton d'envoi avec trois etapes

Références

Site web

[Créé / modifié] [01-01-2022 / 01-01-2022]

Smelyanets Alexey - Add to cart

Caractéristiques

  • Bouton d'ajout au panier
  • CSS, JS, jQuery
  • Le bouton 'add to cart' se contracte et en reprenant sa forme originelle envoie + 1 dans le panier
  • Moscou, Russie

Image cliquable pour voir l'exemple

bouton en prise de commande

Références

Site web

[Créé / modifié] [18-01-2022 / 18-01-2022]

Stumpel Cyd - Message

Caractéristiques

  • Bouton d'envoi
  • CSS, JS, Gsap.js
  • Au survol l'avion prend son élan (et oui !) puis s'envole... puis revient
  • Le départ est associé au tremblement du bouton du fait qu'il dépasse l'espace de la page
  • Amsterdam, Pays-Bas

Image cliquable pour voir l'exemple

bouton d'envoi d'email

Références

Site web

[Créé / modifié] [27-04-2022 / 27-04-2022]

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 vote

Burnette Marcus - Feedback reaction

Caractéristiques

  • CSS pur
  • Cette solution de vote est une présentation très simple du visuel d'un système de vote
  • Orlando, Floride, USA

Image cliquable pour voir l'exemple

visuel d'un systeme de vote

Références

Site web

Site de l'auteur

[Créé / modifié] [18-01-2022 / 18-01-2022]

Crawford Andrea - Feedback reaction

Caractéristiques

  • CSS pur
  • La totale : Option zéro étoile; Vote par 1/2 étoile; Vote par étoile complète
  • Prague, République tchèque

Image cliquable pour voir l'exemple

systeme de vote en css pur

Références

Site web

[Créé / modifié] [14-05-2022 / 14-02-2022]

Cukuren Mert - Feedback reaction

- Image SVG

Caractéristiques

  • CSS, Normalize.css
  • Rollover des étoiles au survol
  • Au clic le smiley correspondant à la note s'affiche après déroulé
  • Izmir, Turquie

Image cliquable pour voir l'exemple

vote avec smiley

Références

Site web

[Créé / modifié] [05-02-2022 / 05-02-2022]

Desroches Henry - Feedback reaction

Caractéristiques

  • CSS, JS, rien d'autre
  • Le choix du nombre d'étoiles se fait via le curseur
  • New York, USA

Image cliquable pour voir l'exemple

animation d'un systeme de vote message de reussite

Références

Site web

[Créé / modifié] [14-05-2022 / 14-02-2022]

Ichinose Takane - Feedback reaction

Caractéristiques

  • CSS, Normalize.css, JS, Vue.js
  • Au survol l'étoile cible se colore de jaune
  • Après le clic un message de "prise en compte du vote" s'affiche
  • Kanagawa, Japon

Image cliquable pour voir l'exemple

animation d'un systeme de vote message de reussite

Références

Site web

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

Iker Aaron - Feedback reaction (2)

- C'est classique mais tellement bien fait !

Caractéristiques

  • CSS, très peu de JS
  • Pas de réaction au survol
  • Animation de chaque smiley avec l'expression qui va bien
  • Münster, Allemagne

Image cliquable pour voir l'exemple

animation en CSS d'un systeme de vote

Références

Site web

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

Loopez Josetxu

Caractéristiques

  • CSS pur
  • Au survol d'une étoile le chiffre (niveau) correspondant s'affiche
  • Au clic les étoiles retenues s'affichent et le chiffre est mémorisé
  • Madrid, Espagne

Image cliquable pour voir l'exemple

animation d'un systeme de vote

Références

Site web

Site de l'auteur

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

Mc Guire Aaron - Feedback reaction

- Nécessite impérativement : 'stopExecutionOnTimeout - 1b93190375e9ccc259df3a57 c1abc0e64599724ae30d7 ea4c6877eb615f89387.js'

Caractéristiques

  • CSS, JS
  • Pas de réaction au survol
  • Au clic les étoiles retenues s'animent puis deviennet jaunes
  • S'ajoute le texte correspondant à la note
  • Manchester, Grande-Bretagne

Image cliquable pour voir l'exemple

animation d'un systeme de vote

Références

Site web

[Créé / modifié] [18-03-2022 / 18-03-2022]

Mulligan Ryan - Feedback reaction (2)

Caractéristiques

  • CSS pur
  • Pas de réaction au survol
  • Le jaune est plus ou moins intense en fonction de la note
  • L'expression est plus ou moins souriante en fonction de la note

Image cliquable pour voir l'exemple

animation d'un systeme de vote avec un smiley anime

Références

Site web

Site de l'auteur

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

Senneff Darin - Feedback reaction

- Très original, voire ludique !

Caractéristiques

  • CSS, JS, jQuery, Gsap
  • Utilisation de MorphSVGPlugin. Il faut être inscrit
  • Double réaction au survol
  • Le nombre de cornes évolue avec le nombre d'étoiles
  • New-York, USA

Image cliquable pour voir l'exemple

animation d'un systeme de vote avec une tete de monstre

Références

Site web

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

ZaplaicZeno - Survey concept

Caractéristiques

  • CSS, Normalize.css, JS, jQuery, Dragdealer.js
  • Pas de rollover
  • Il faut saisir le rond vert avec la souris ou avec le doigt et le déplacer sur le numéro souhaité
  • À la saisie une info bulle apparaît
  • Bouton de soumission
  • Aberdeen, Grande-Bretagne

Image cliquable pour voir l'exemple

animation d'un systeme de vote pour sondage

Références

Site web

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

 

Système de boutons pour "Menu"

Ceylan Aybuke (2)

Caractéristiques

  • CSS, JS
  • Au clic sur le bouton, un cadre blanc s'ouvre et se remplit, en fondu et en décalé, des lignes de menu
  • Rollover sur les lignes de menu
  • Superbe !
  • Izmir, Turquie

Image cliquable pour voir l'exemple

bouton de menu local

Références

Site web

[Créé / modifié] [10-06-2022 / 10-06-2022]

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]

Delise Angela - Menu

Caractéristiques

  • CSS, JS, rien d'autre
  • Rollover: le bouton enfle légèrement
  • Au clic se développe un menu vertical
  • Sur chaque ligne de menu le rollover provoque d'une part un léger gonflement de l'icône et d'autre part l'affichage du texte associé
  • Rapport résultat / code très favorable

Image cliquable pour voir l'exemple

developpement d'un menu apres clic sur un icone

Références

Site web

[Créé / modifié] [04-03-2022 / 04-03-2022]

Joseph Jones - Menu

Caractéristiques

  • CSS pur
  • Le bouton, au départ est animé: Les 3 petits points défilent
  • Au clic les icônes se déploient en mode fondu
  • Léger rollover dans tous les cas de figure. Super !
  • Retrait des icônes à l'inverse exact de l'affichage
  • Quel beau travail !
  • Chennai, Inde

Image cliquable pour voir l'exemple

bouton de menu complementaire

Références

Site web

[Créé / modifié] [10-06-2022 / 10-06-2022]

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]

Tudor Ana - Menu

Caractéristiques

  • CSS, JS, rien d'autre
  • Aucun rollover
  • Au clic se développe un menu vertical
  • Chaque ligne de menu s'affiche de manière glissante
  • Le bouton se transforme en croix pour la fermeture en émettant quelques confettis

Image cliquable pour voir l'exemple

bouton menu sans rollover

Références

Site web

[Créé / modifié] [04-03-2022 / 04-03-2022]

 

Bouton "Download / Upload"

Hysa Ben - Download

Caractéristiques

  • CSS pur
  • Léger rollover
  • Au clic une ligne de progression démarre
  • Arrivé à terme le message 'Open File' s'affiche
  • Monténégro

Image cliquable pour voir l'exemple

ligne de progression de download avec open file

Références

Site web

Site de l'auteur

[Créé / modifié] [05-02-2022 / 05-02-2022]

Iker Aaron (3) - Download

Caractéristiques

  • CSS, Inter.css, JS, Gsap.js
  • Pas de rollover
  • Au clic l'animation, assez sophistiquée, se met en route
  • Un pourcentage s'égrène en même temps que le cercle se fonce
  • Arrivé à 100% la vague se transforme en un 'V' de validation
  • Munster, Allemagne

Image cliquable pour voir l'exemple

bouton de download sophistique

Références

Site web

[Créé / modifié] [05-02-2022 / 05-02-2022]

Jagmeet Singh Nagi - Download

Caractéristiques

  • CSS, JS, rien d'autre
  • Aucun rollover
  • Au clic, l'icône se déplace et se met à tourner
  • À la fin, la couleur change et l'icône affiche le "v" de la réussite
  • Inde

Image cliquable pour voir l'exemple

bouton de progression de download

Références

Site web

[Créé / modifié] [10-06-2022 / 10-06-2022]

Perez Edgar - Download

Caractéristiques

  • CSS, JS, rien d'autre
  • Léger rollover
  • Au clic une barre de progression se met en route
  • Arrivé à terme le message de réussite s'affiche
  • Mérida, Vénézuela

Image cliquable pour voir l'exemple

bouton de progression de download

Références

Site web

[Créé / modifié] [05-02-2022 / 05-02-2022]

Roberts Calvin - Download

Caractéristiques

  • Pur CSS
  • Une ligne de progression s'active de manière récursive en même temps que'un voyant clignote
  • Pas de message de fin de transfert
  • Londres

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é] [18-03-2022 / 18-03-2022]

Singh Himalaya - Upload

Caractéristiques

  • Pur CSS
  • Pas de rollover
  • Le rectangle se transforme en carré puis se remplit de liquide jaune
  • Une fois la fin du transfert un message de clôture est affiché
  • Inde

Image cliquable pour voir l'exemple

animation en pur CSS d'un upload

Références

Site web

[Créé / modifié] [27-04-2022 / 27-04-2022]

Singh Satyam (2) - Download

Caractéristiques

  • CSS, JS, rien d'autre
  • Très léger rollover
  • La demande de téléchargement est prise en compte
  • Le temps passé par rapport au temps total est prévu
  • Le message de succès est intégré
  • Belle proposition !
  • Noida, Inde

Image cliquable pour voir l'exemple

bouton de suivi de telechargement - download

Références

Site web

[Créé / modifié] [18-01-2022 / 18-01-2022]

Tin Fung, Chan - Download

Caractéristiques

  • CSS, JS, rien d'autre
  • Très léger rollover
  • Au clic une barre de progression se met en route
  • Arrivé à terme le message de réussite s'affiche dans le bouton origine qui change de couleur
  • Hong Kong

Image cliquable pour voir l'exemple

bouton avec barre de progression

Références

Site web

[Créé / modifié] [18-03-2022 / 18-03-2022]

 

Bouton "Autre"

Molnar Nikolett - Call Us

Caractéristiques

  • Bouton d'invitation : Appelez-moi !
  • CSS pur, aucune dépendance
  • Au rollover le couvercle bleu glisse sur la gauche pour découvrir le numéro à appeler
  • Hongrie

Image cliquable pour voir l'exemple

bouton qui invite a appeler au numero indique

Références

Site web

[Créé / modifié] [25-01-2022 / 25-01-2022]

Nykjaer Kunuk - J'aime

Caractéristiques

  • Bouton de déclaration d'amour : J'aime
  • CSS pur
  • Le coeur, gris avant clic, devient rouge par irradiation circulaire
  • Danemark

Image cliquable pour voir l'exemple

bouton qui signifie j'aime

Références

Site web

[Créé / modifié] [18-01-2022 / 18-01-2022]

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]

Racoare Vlad - Commande

Caractéristiques

  • Pur CSS
  • Pas de rollover
  • Au clic le bouton s'écrase en perdant tout son relief
  • Très réussi
  • Bucarest, Roumanie

Image cliquable pour voir l'exemple

animation en pur CSS d'un bouton de commande qui s'ecrase

Références

Site web

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

Salloum Nick

Caractéristiques

  • CSS, JS
  • Une très légère ombre se déclare au survol. Elle est accentuée au clic
  • Au relachement, apr-s clic, le bouton envoie des étoiles délicatement
  • J'aime bien parce que c'est complet et très subtile
  • Vancouver, Colombie Britannique, Canada

Image cliquable pour voir l'exemple

le bouton envoie de sétoiles

Références

Site web

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