Personnalisation des boutons

Version imprimable

23/02/2016, 01h05
Matrixx

Personnalisation des boutons

Bonjour/Bonsoir

Je suis nouveau dans le domaine, j'essai de crée une page avec 3 boutons qui redirige vers d'autre page, j'ai crée les bouton avec les liens des autre page mais le problème c'est que j'essai de personnaliser ces boutons je m'explique:

au lieu d'avoir les boutons rectangulaire normal, je veux mettre des truc rond que j'ai crée moi même,et d'un autre coté je veux que ça soit au centre de la page web

NB: y'aura que ces 3 boutons sur la page
NB1: Actuellement les 3 boutons sont rectangulaire et se trouve en haut à gauche

j’espère que j'étais claire et j'attends vos réponse avec impatience

Cordialement

Tu peux faire simplement ceci

Code:

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
29
30
31
32
33
<html>
<head>
 
<style>
.button{
    border-radius: 8px;
    background:#f0f0f0;
    width:100px;
    height:25px;
    border-style:solid;
    border-width:1px;
    border-color:#909090;
    margin:3px;
    cursor:pointer;
}
</style>
 
</head>
 
<body>
 
<center>
<span class="button" onclick="window.location = 'testColonne.html'">
    Accès page 1
</span>
<span class="button" onclick="window.location = 'testCSS3.html'">
    Accès page 2
</span>
</center
 
</body>
 
</html>

23/02/2016, 16h19
Matrixx

Merci pour ta réponse, j'ai pus centrer les boutons au milieu de la page à l'aide de le balise que tu m'a montrer <center></center> et <br></br>

ce qui manque maintenant c'est comment remplacer les boutons par mes propre boutons.
23/02/2016, 16h23
OButterlin

En gérant l'événement onclick sur la balise <span> comme je te l'ai montré dans mon exemple.
Rien ne t'empêche d'appeler une méthode javascript plutôt que de mettre le code directement.

Tu as un problème pour faire ça ?
23/02/2016, 16h33
Matrixx

Je ne suis pas sur d’avoir compris(excuse moi), peut-tu me montrer un exemple stp
23/02/2016, 17h05
OButterlin

Tu copies le code que je t'ai mis en exemple dans un fichier unNom.html et tu testes avec ton navigateur... tu verras si ça te convient.
23/02/2016, 18h38
Matrixx

C'était déjà fait avant que je repend la première fois, et non c'est pas ce que je cherche par-contre j'ai trouver ce que tu voulais dire par géré l’événement(du moins c'est ce que je pense).

Je suis entrain de faire des test/recherche :? je donnerai une réponse une fois que c'est bon.
24/02/2016, 00h06
Matrixx

Bonsoir

J'ai trouver la solution, c'est pas vraiment quelque chose d'ultra dure c'est plutôt tros facile. mais hélas je suis un débutant en tout cas je te remercie "OButterlin" ton message était un bon début:

<body>

<div align="center">
<a href="page1.xhtml"><img src="images/img.png" alt="Boutton1" /></a>
<a href="page2.xhtml"><img src="images/img.png" alt="Boutton2" /></a>

</div>

</body>