Lien entre deux pages avec un bouton

[Fermé]
Signaler
Messages postés
323
Date d'inscription
mardi 11 septembre 2012
Statut
Membre
Dernière intervention
24 août 2016
-
Bonjour, je viens de créer une page web avec seulement des boutons (je débute), et j'aimerais que ces boutons ouvrent une deuxième page lorsque l'on clique dessus. je sais faire un lien, mais ça s'affiche souligné bleu et surtout, ça s'affiche comme du texte. Alors voilà le code que j'ai écrit :

La page HTML :

<!DOCTYPE html>
<html>
<head>
<header>

</header>
<meta charset="utf-8" />
<link rel="stylesheet" href="Service.css" />
<title>Premiers tests du CSS</title>
</head>

<body>
<nav>
<a href="#" class="myButton">Bonjour</a>
</nav>

<nav1>
<a href="#" class="Button">Au-revoir</a>
</nav1>



</body>
</html>

Et la page CSS :

body
{
background-color : teal;

}
.myButton {

-moz-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
-webkit-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
box-shadow:inset 0px 1px 0px 0px #7a8eb9;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #eeff00), color-stop(1, #cfe815));
background:-moz-linear-gradient(top, #eeff00 5%, #cfe815 100%);
background:-webkit-linear-gradient(top, #eeff00 5%, #cfe815 100%);
background:-o-linear-gradient(top, #eeff00 5%, #cfe815 100%);
background:-ms-linear-gradient(top, #eeff00 5%, #cfe815 100%);
background:linear-gradient(to bottom, #eeff00 5%, #cfe815 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeff00', endColorstr='#cfe815',GradientType=0);

background-color:#eeff00;

-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;

border:1px solid #314179;

display:inline-block;
color:#2e12a1;
font-family:Segoe Script;
font-size:20px;
font-weight:bold;
padding:6px 12px;
text-decoration:none;

}
.myButton:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #cfe815), color-stop(1, #eeff00));
background:-moz-linear-gradient(top, #cfe815 5%, #eeff00 100%);
background:-webkit-linear-gradient(top, #cfe815 5%, #eeff00 100%);
background:-o-linear-gradient(top, #cfe815 5%, #eeff00 100%);
background:-ms-linear-gradient(top, #cfe815 5%, #eeff00 100%);
background:linear-gradient(to bottom, #cfe815 5%, #eeff00 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfe815', endColorstr='#eeff00',GradientType=0);

background-color:#cfe815;
}

.Button {

-moz-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
-webkit-box-shadow:inset 0px 1px 0px 0px #7a8eb9;
box-shadow:inset 0px 1px 0px 0px #7a8eb9;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #eeff00), color-stop(1, #cfe815));
background:-moz-linear-gradient(top, #eeff00 5%, #cfe815 100%);
background:-webkit-linear-gradient(top, #eeff00 5%, #cfe815 100%);
background:-o-linear-gradient(top, #eeff00 5%, #cfe815 100%);
background:-ms-linear-gradient(top, #eeff00 5%, #cfe815 100%);
background:linear-gradient(to bottom, #eeff00 5%, #cfe815 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeff00', endColorstr='#cfe815',GradientType=0);

background-color:#eeff00;

-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;

border:1px solid #314179;

display:inline-block;
color:#2e12a1;
font-family:Segoe Script;
font-size:20px;
font-weight:bold;
padding:6px 12px;
text-decoration:none;

}
.Button:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #cfe815), color-stop(1, #eeff00));
background:-moz-linear-gradient(top, #cfe815 5%, #eeff00 100%);
background:-webkit-linear-gradient(top, #cfe815 5%, #eeff00 100%);
background:-o-linear-gradient(top, #cfe815 5%, #eeff00 100%);
background:-ms-linear-gradient(top, #cfe815 5%, #eeff00 100%);
background:linear-gradient(to bottom, #cfe815 5%, #eeff00 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfe815', endColorstr='#eeff00',GradientType=0);

background-color:#cfe815;


}

nav
{
position : absolute;
left: 30%;
bottom: 50%;
width: 300px;

}

.Button
{
position : absolute;
right: 30%;
bottom: 50%;
width: 250px;
}


La page CSS est bien longue mais c'est parce que j'ai utilisé un logiciel spécial pour la création des boutons.
Merci d'avance pour vos réponses !