28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je viens vers vous car là je sèche.
Je souhaiterais créer un bouton, un cercle dans lequel je placerais un texte.
Je débute en css, et là je sèche.
Mon code html est le suivant :
<figure class="ball"><a class=titreball>Lire l'article</a></figure>


Mon CSS est le suivant :
.ball
{
position:absolute;
right:0;
 background: black;
 border-radius: 50%;
 height: 100px;
 width: 100px;
 margin: 0;
  background: radial-gradient(circle at 100px 100px, #5cabff, #000);}
.titreball
{text-align:center;
color:blue;
margin-top:40%;
display:block;}


Jusque là tous va bien le texte est là où je le souhaite, il est bien intégré au bouton. Cependant, je souhaiterais déplacer ce bouton à droite de sa div parente. La propriété float ne fonctionnant pas, (normal, je suis en position absolute...), je ne sais comment déplacer ce bouton à droite.

Quelqu'un pourrait-il m'aider ?
Si vous avez besoin de précisions, n'hésitez pas, c'est mon premier post, et je ne suis peut-être pas très clair.

Bonne soirée à tous.
Pourquoi ne fais tu pas quelque chose comme ça:

<a class=ball>Lire l'article</a>

et pour ton css:

.ball
{
float: right;
background: black;
border-radius: 50px;
height: 100px;
width: 100px;
margin: 0 auto;
background: radial-gradient(circle at 100px 100px, #5cabff, #000);
text-align:center;
color:blue;}
Modérateur
Bonjour,

+1 pour marginus, mais j'apporterais 3 modifs minimes :
.ball{
  float: right;
  background: black;
  border-radius: 50%; /*Au lieu de 50px*/
  height: 100px;
  width: 100px;
  /*margin: 0 auto;/*Pas sur qu'il y en ai besoin de ça*/
  background: radial-gradient(circle at 100px 100px, #5cabff, #000);
  text-align:center;
  color:blue;
  line-height : 100px; /*Et un line-height égal à la hauteur pour que le texte soit centré. Attention cela ne marche que pour une ligne*/
}

Modifié par _laurent (03 Sep 2014 - 09:14)
squeek a écrit :
Bonjour,
Cependant, je souhaiterais déplacer ce bouton à droite de sa div parente.


Bonjour, qu'est ce que le bouton ?
le lien ?
où figure + lien ?

Quel est donc le parent que tu évoque et que contient t-il a prt ton 'bouton', comment est-il stylé ?
++
Bonjour, et merci pour vos réponses !!
Je viens de mettre en pratique les modifications de _Laurent et ça marche nickel, j'avais pas songé à l'attribut line-height, merci pour l'info !! Smiley biggrin