Code pour Créer un Bouton Rond en CSS

Découvrez comment créer facilement un bouton rond en CSS. Avec cette technique, vous n’aurez plus besoin d’ouvrir votre logiciel de graphisme et surtout d’intégrer à votre design une image supplémentaire. Vous gagnerez donc en performance avec seulement quelques lignes de CSS! Pour créer un bouton rond ou tout autre élément d’ailleurs comme un div ou une image, il suffit de donner une largeur et une hauteur identiques au bouton et un border-radius de 50%.

La page démo. Le code source:

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Bouton Rond en CSS</title>
		<style>
			.rond{
				border-radius:50%;
				width:100px;
				height:100px;
				background: linear-gradient(#f7f7f7, #e7e7e7); 
				box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
				border:none;
				outline:none;
				font: 18px Tahoma bold;
				color: #a7a7a7;
				text-shadow: 1px 1px 1px lighgrey;
				margin:20px;
			}
			div.rond{
				text-align:center;
			}
			div.rond span{
				position:relative;
				font-size:20px;
				top:40px;
			}
		</style>
	</head>
	<body>
	
		<h1>Bouton, Div et Image Ronds en CSS</h1>
	
		<button class="rond">Bouton Rond</button>
		
		<div class="rond"><span>Div</span></div>
		
		<img src="cat.jpg" width="100" height="100" alt="Chat Rond" class="rond" />
	</body>
</html>
Publié dans CSS

quand j’aurai le temps

  • les filtres wordpress
  • plugin wordpress et enregistrement de données
  • les wordpress custom post type
  • la bdd d'un blog wordpress
  • la balise more de wp
  • personnaliser une galerie wp
  • gérer les longueurs des extraits de wp
  • les animations css3
  • le memento symphony2
  • le squelette d'une page html5
  • liste sur plusieurs colonnes
  • le responsive design
  • exemple d'un jeu basique en html5
  • la réplication des bases de données
  • mettre en place une architecture en silo avec wp
  • parser un fichier xml (donc un rss) avec php5
  • mettre en place lightbox sans plugin
  • améliorer les performances de son wp
  • ajouter un bouton à l'éditeur de texte de wp
  • ...