Insertion de bouton css

Fermé
matthieu.s Messages postés 33 Date d'inscription vendredi 12 avril 2013 Statut Membre Dernière intervention 7 mai 2016 - 15 avril 2013 à 14:01
matthieu.s Messages postés 33 Date d'inscription vendredi 12 avril 2013 Statut Membre Dernière intervention 7 mai 2016 - 16 avril 2013 à 00:12
bonjour a toute et à tous.
désolé de recréé un autre sujet sur les bouton css mais mon problème n'est pas complètement résolue. je vais sur plusieurs site qui propose des générateur de bouton comme :
https://css-tricks.com/examples/ButtonMaker/
https://www.cssbuttongenerator.com/
et je n'arrive pas à les insérer dans ma page dans Dreamweaver.
ma question : y a t il un script spécial en html ? sur le deuxième lien il y en a un mais cela donne un bouton très bas de gamme.
ou alors y a il un script css a mettre en plus comme .bouton{
merci d'avance

6 réponses

astuces72 Messages postés 7723 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 22 avril 2024 1 637
15 avril 2013 à 15:21
slt

il faut le nom de la class sur ton bouton.

<input class="classname" value="Bouton" name="test" type="button" />
ou
<span class="classname"><a href="google.fr">Bouton</a></span>
0
matthieu.s Messages postés 33 Date d'inscription vendredi 12 avril 2013 Statut Membre Dernière intervention 7 mai 2016 1
15 avril 2013 à 15:46
slt

je suis désolé mais je ne comprend toujours pas
alors si je comprend un peut il faut mentionner la class dans le code ?
sinon quelle class ?
0
astuces72 Messages postés 7723 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 22 avril 2024 1 637
Modifié par astuces72 le 15/04/2013 à 15:56
il te faut le style css du second lien:

<style type="text/css">   
.classname {   
 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;   
 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;   
 box-shadow:inset 0px 1px 0px 0px #ffffff;   
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );   
 background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );   
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');   
 background-color:#ededed;   
 -moz-border-radius:6px;   
 -webkit-border-radius:6px;   
 border-radius:6px;   
 border:1px solid #dcdcdc;   
 display:inline-block;   
 color:#777777;   
 font-family:arial;   
 font-size:15px;   
 font-weight:bold;   
 padding:6px 24px;   
 text-decoration:none;   
 text-shadow:1px 1px 0px #ffffff;   
}.classname:hover {   
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );   
 background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );   
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');   
 background-color:#dfdfdf;   
}.classname:active {   
 position:relative;   
 top:1px;   
}   
/* This imageless css button was generated by CSSButtonGenerator.com */   
</style>


et tu affiches ton bouton dans le code html de ta page:
pour un formulaire:
<input class="classname" value="Bouton" type="button" />
ou un simple lien:
<span class="classname"><a href="google.fr">Bouton</a></span>
0
matthieu.s Messages postés 33 Date d'inscription vendredi 12 avril 2013 Statut Membre Dernière intervention 7 mai 2016 1
15 avril 2013 à 16:09
merci sa fonctionne mais le style reste laid
0

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

Posez votre question
astuces72 Messages postés 7723 Date d'inscription vendredi 15 janvier 2010 Statut Membre Dernière intervention 22 avril 2024 1 637
15 avril 2013 à 17:30
le style c'est celui du second lien, un bouton gris avec un degrader gris, à toi de modifier le bouton comme tu le souhaite avec les options de cette page
0
matthieu.s Messages postés 33 Date d'inscription vendredi 12 avril 2013 Statut Membre Dernière intervention 7 mai 2016 1
16 avril 2013 à 00:12
Si je recapitule bien
On copie colle le code css dans l. Onglet css
Et on met le code html dans le code source.
Et normalent en le visualisant sa donne le bouton
C est bien sa ?
0