28173 sujets

CSS et mise en forme, CSS3

[Résolu] Bouton extensible

bonjour,

comment pourrais je réaliser un bouton avec des coins arrondis qui pourrait s'étendre selon le texte et de plus avec un rollover à la manière porte coulissante sur tous le bouton?

<a href="/" class="button"><span class="start"></span>Edit Data</a>




.start {
	background: yellow url(/ECOS/images/button_start.png) no-repeat top left;
	height: 21px;
	width: 9px;
	float: left;
	margin: 0 5px 0 0;
}

a.button {
font-family: Arial, Helvetica, sans-serif;
	display: block;
	font-size: 12px;
	font-weight: bold;
	line-height: 21px;
	color: #595a5c;
	text-decoration: none;
	height: 21px;
	float: right;
	padding: 0 30px 0 0;
	margin: 5px 0 0 0;
	background: red url(images/button_end.png) repeat-x top right;
}

a.button:hover {
	background: red url(/images/button_end.png) repeat-x bottom right;
}

.start:hover {
	background: yellow url(/images/button_start.png) no-repeat bottom left;
}


Merci pour votre aide Smiley sweatdrop
Modifié par gforce (03 Jul 2007 - 10:10)
Modérateur
bonsoir,

pas de lien ni d'image pour visualiser le probleme et d'envisager de te proposer une "technique" plutot qu'une autre ... trop flou , tu n'auras aucune propositions a part celle de te renvoyer sur les "portes coulissantes" ..
gc
À priori on partira plutôt d'un code HTML de ce type :
<a href="..."><span>Intitulé</span></a>

Et en CSS, on a une image de fond pour la gauche et le centre sur le a, une image de fond pour la droite (dont le petit picto) sur le span, et du :hover pour changer les images de fond.

Bon, ça ne sera pas extensible en hauteur, donc on pensera à mettre les images de fond en no-repeat et centrées verticalement.

Ah oui, et un peu de padding, à appliquer uniquement au span. Par exemple :
a span {padding: 6px 30px 6px 12px;}
Ah oui, j'avais pas vu : ça veut dire quoi la flèche, et ça veut dire quoi « rollover à la manière porte coulissante » ? Tu veux un effet d'animation ? Là ça va être chaud juste en CSS, hein. Il va falloir par exemple agrandir progressivement le bloc, via un peu de Javascript.

À moins qu'on ne puisse faire quelque chose avec une image de fond en GIF ? Mais il me semble que ça n'est pas évident à gérer.
ben fait le bouton je suis arrivé à le faire mais le problème c'est pour le rollover. il ne le déclanche que sur la partie centrale et pas les 2 extrémité Smiley smile
bon voici mon code, j'ai mis des background color au lieu de background image pour que ce sois plus facile. J'aimerais que lorsque l'on passe sur la surface rouge le coin jaune devienne également bleu.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">
	.start {
	background: yellow;
	height: 21px;
	width: 9px;
	float: left;
	margin: 0 5px 0 0;
       }

.button {
	font-family: Arial, Helvetica, sans-serif;
	display: block;
	font-size: 12px;
	font-weight: bold;
	line-height: 21px;
	color: #595a5c;
	text-decoration: none;
	height: 21px;
	float: right;
	padding: 0 30px 0 0;
	margin: 5px 0 0 0;
	background: Yellow;
	background: red;
}

.button:hover {
	color: #ffffff;
	background: blue;
}
</style>
</head>
<body>
<a href="/" class="button"><span class="start"></span>Edit Data</a>
</body>
</html>
Sujet clos
Aller à