Pseudos bouton avec une balise p

Résolu/Fermé

barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 - 20 nov. 2013 à 23:30
barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 - 24 nov. 2013 à 22:21

Bonjour,

J'ai des pseudos bouton avec une balise p et du texte et si je veux les colorer en blanc, je fais:

color:#fff;

mais comme les liens de ma page ont une couleur différente, il prennent donc cette couleur.
Si j'interviens directement sur ma balise p en faisant :

<p style="color:#fff">

ça fonctionne mais je souhaite savoir comment faire pour faire en sorte que ça fonctionne dans ma feuille de style sans intervention sur ma page (à part pour mettre ma classe)

Merci de votre aide.

A voir également:

Pseudos bouton avec une balise p
Balise br ✓ - Forum Webmastering
Balise </br> - Forum HTML
P/n ✓ - Forum Logiciels
Faire sauter 2 lignes avec br (CSS) - Forum CSS
Bouton shift pc ✓ - Forum Jeux vidéo

6 réponses

Réponse 1 / 6

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
21 nov. 2013 à 08:13

Salut

c est tres simple , tu donne une class a tes p de bouton

<p class="bouton">
        <a href="#">bouton</a>
      </p>

et tu style les a de cette class dans ta css !

 .bouton a{.........
}

exemple

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <style type="text/css">
    <!--
    #global{
      width: 200px;
      margin: 100px auto;
    }

    .bouton a{
      text-decoration: none;
      font-size: larger;
      color: #FF0000;
      padding: 5px;
      text-align: center;
      border: medium solid #99FFFF;
      border-radius: 26%;
      -webkit-border-radius: 26%;
      -moz-border-radius: 26%;
      background-color: #CCFFFF;
    }

    .bouton a:hover{
      background-color: #FFFF99;
      color: #000066;
      border: medium solid #FFFF61;
    }
    -->
    </style>
  </head>
  <body>
    <div id="global">
      <p>
        <a href="#">lien Normal</a>
      </p>
      <p class="bouton">
        <a href="#">Bouton</a>
      </p>
    </div>
  </body>
</html>

Réponse 2 / 6

barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 110
21 nov. 2013 à 17:35

C'est bien ce que je fais mais cela ne fonctionne pas pour le texte (lien)


.bouton {
	text-decoration:none;
	color:#fff;
	margin:0;
	padding:10px 20px 10px 20px;
	border-radius:12px 0 12px 0;
	border:1px solid #7F9DB9;
	background: linear-gradient(to top, #66CCFF, #009BC7);
    text-shadow: 0.1em 0.1em 0.1em #393939, 0.1em 0.1em 0.1em #393939;
	font-family: Verdana, Geneva, sans-serif;
	font-weight:normal;
	font-style:normal;
	font-size: 90%;
	line-height: 50px;
	}
.bouton:hover{
    box-shadow: 0px 2px 2px #393939, 2px 2px 2px #393939, -2px -2px 2px #393939 ;
	}

Et sur ma page:

<a class="bouton" href="modif.php?id=<?php echo $row_Recordset1['id']; ?>">Modifier</a>

Réponse 3 / 6

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
21 nov. 2013 à 18:55

?? moi je n ai pas de problemes ?

il ni a pas de css apres celui ou ce trouve le bouton !
meme une autre css insere apres celle ci ? ?

par contre Attention si tu style directement le <a> en bouton ,sur IE < 10 on ne verras pas de couleur de background sur le bouton !

Réponse 4 / 6

barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 110
21 nov. 2013 à 21:46

Ok merci.

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
21 nov. 2013 à 22:24

si tu style directement le <a> en bouton tu lui ajoute un

display: inline-block;

pour ie

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 110
Modifié par barale61 le 23/11/2013 à 17:07

Oui mais en fait c'est le paragraphe que tu style pas le <a> sinon cela ne fonctionne pas et c'est ce que je voudrais faire.

Par contre si je fais


     <acronym  class="bouton">
        <a href="#">Bouton</a>
</acronym>

Ça fonctionne mais est-ce propre ?

Réponse 6 / 6

barale61 Messages postés 1208 Date d'inscription jeudi 13 septembre 2012 Statut Membre Dernière intervention 4 novembre 2024 110
24 nov. 2013 à 22:21

Cela fonctionne bien.

Discussions similaires

la balise <br> ou <br />

signification du smiley :-P

Connaît tu les Smiley ? :p

que veut dire :p

signification de mkdir -P