toutpublic Générez des boutons en CSS3 sans programmation

buttonX logoLe CSS3 est le nom employé pour caractériser l’ensemble des nouveautés depuis le CSS2.1. Il permet, par exemple, de définir de nouveaux effets à appliquer sur les éléments HTML et donc de réaliser des effets visuels assez impressionnants. Le site webarti.com propose un service gratuit en ligne pour créer des boutons en CSS3 (avec des effets) sans saisir la moindre ligne de code CSS et sans aucune ligne  javascript dans la page web.


Comment faire ?

1) Conception du bouton

  • Saisr le texte de son bouton en haut de la page
  • Régler tous les paramètres à droite avec les curseurs (à la souris) :
    • Font Size, Border Radius, Border Size, Vertical Size, Horizontal Size,  Box Shadow, Vertical Position, Horizontal Position etc

  • Sélectionner sous le bouton les couleurs via les mélangeurs, fond, texte, bordure etc
  • Cliquez sur le bouton pour générer le code CSS3

 

buttonX ecran

 2) intégration à la page web

  • Coller le code CSS. généré plus haut dans la page Css de votre site.
  • Dans votre page web Insérer le lien vers votre fichier CSS dans la balise head de votre page du type : <link href="/css/testcss3.css" rel="stylesheet" type="text/css" />
  • Insérer le lien du bouton à l'endroit voulu dans votre page web  <a href="#" class="myButton">Tice Education</a>
  • Tester dans votre navigateur

 Une application sympatique, simple qui permet de concevoir des boutons avec des effets CSS3 sans partiquement aucune connaissance. A tester...

Plus d'informations ici : http://webarti.com/best-CSS3-button-maker/

Aucun commentaire

Devenir Membre

Pour vous informer sur l'école numérique (Tice), les applications pédagogiques, les outils, le codage, l'algorithmique, les objets connectés... Totalement Gratuit !

S'inscrire

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Essentiel
Ces cookies sont nécessaires au bon fonctionnement du site, vous ne pouvez pas les désactiver.
session
Accepter
Analytique
Outils utilisés pour analyser les données de navigation et mesurer l'efficacité du site internet afin de comprendre son fonctionnement.
Google Analytics
Mesure d'audience
Accepter
Décliner