Discussion :

[filou80]

Bonsoir à tous

Je suis novice dans la "programmation" je suis entrain de creer un formulaire, j'ai un bouton envoyer et reset que je souhaite modifier l'aspect, j'ai modifier la class mais il prend pas l'aspect que je souhaite, il reste identique.
le bouton et "input" j'ai voulu prendre l'aspect d'un bouton " li"
Je vous et le liens de la page avec les 3 boutons, c'est en cours de création, soyez indulgent, les 3 boutons sont "envoyer" et "réinitialiser" c'est cela que je veux modifier et l'autre c'est "comme celui la".
Voici le lien vers la page : http://yakasolutions.pagesperso-orange.fr/contact2.html

Merci par avance.

@+Filou

[NoSmoking]

Bonjour,

j'ai modifier la class mais il prend pas l'aspect que je souhaite, il reste identique.

tu as modifié la classe certes mais qu'as tu mis comme propriétés/valeurs dans cette classe ?

[filou80]

Bonjour

En mettant la class sa reprend pas les mêmes infos les mêmes propriétés que l'autre ?

Cdlt

@+Filou

[filou80]

quelle difference entre :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<ul>
	<li class="send"><a href="test.html"><i class="fa fa-share"></i>Webmaster</a></li>
</ul>

et

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="submit" class="send" value="Envoyer">

au niveau de la class les boutons devraient ils pas être identique ?

[NoSmoking]

Difficile de répondre simplement à tes interrogations !

au niveau de la class les boutons devraient ils pas être identique ?

Oui et non cela va dépendre de ce qu'il y a comme régles définies dans la classe.

Si l'on regarde comment et définie ton lien, balise <a>, on ce rend compte que l'élément hérite de ses parents, c'est le C de CSS pour cascade.

CSS récupéré ^(*), et épuré, dans ton document :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.cBtn ul li {
    border-radius: 4px;
    float: left;
    list-style: none;
    background: #092bf8;
    box-shadow: 0px 2px 0px 0px #000;
}
.forma .cBtn .clear, .cBtn .send {
    margin-bottom: 0;
    margin-top: 4px;
    padding: 10px;
    padding-right: 17px;
    padding-left: 17px;
}
.cBtn ul li:last-child {
    margin-right: 0;
}
.cBtn ul li a {
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    font-size: 13px;
    text-align: center;
}
.forma .cBtn .clear a, .cBtn .send a {
    font-family: 'Roboto', 'sans-serif';
    font-weight: 700;
}

on constate donc qu'il n'y a pas de classe send « directe » et donc si tu l'appliques à ton <input> rien ne sera appliqué.

En gros à toi de créer ta propre classe à affecter à <input> pour qu'il ressemble à ton <a>, ne pas oublier le changement de couleur au survol.

Peut être devrais tu jeter un oeil du côté de : Les meilleurs cours et tutoriels pour apprendre le CSS

^(*) dans le navigateur, faire click droit sur l'élément à analyser et choisir dans le menu Inspecter/Examiner l'élément.

[filou80]

Bonjour

Merci pour ton aide c'est bon j'ai créer ma propre class comme vous m'avez dit.
Je penser qu'en remettant la même class cela était bon, je suis novice dans le sujet.
Encore merci.

@+Filou