Besoin d'aide en HTML !

Orga69300, lundi 27 avril 2020 à 13h33

Bonjour à tous !

J’ai un problème avec mon Button en HTML, j’aimerais qu’il fasse une redirection sur une autre page, mais je n’y arrive pas.

Voici mon code :

<style>
     
     .button {
     border: none;
     display: block;
     text-align: center;
     cursor: pointer;
     outline: none;
     overflow: hidden;
     position: relative;
     color: white;
     font-weight: 600;
     font-size: 15px;
     background-color: #000000;
     padding: 15px 50px;
     margin: 0 auto;}
     .button span {
     position: relative; 
     z-index: 1;}
     .button:after {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     height: 580%;
     width: 140%;
     background: #0F0F0F;
     -webkit-transition: all .9s ease-in-out;
     transition: all .9s ease-in-out;
     -webkit-transform: translateX(-100%) translateY(-25%) rotate(45deg);
     transform: translateX(-100%) translateY(-25%) rotate(45deg);}
     .button:hover:after {
     -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
     transform: translateX(-9%) translateY(-25%) rotate(45deg);}
   
    </style>
   <div class="container">  
     <button type="button" class="button">
     <span>Redirection</span>
     </button>

Voici mon bouton, j’aimerais qu’il fasse une redirection sur un autre site.

Si une personne agréable pourrais me répondre en modifiant mon code pour que le button redirige sur un site ça serrait super ! Merci

27/04/20 à 13h33

+0 -1

anonyme, lundi 27 avril 2020 à 13h46
Modifié

Bonjour,

Si une personne agréable […]

Même pas le droit à un chiantos ?

Alors tu as deux solutions : soit tu mets un lien classique et tu le modifies pour que ça ressemble à un bouton, soit tu ajoutes un événement 'click' en Javascript.

Pour la première solution :

<style type="text/css">
.button {
  display: inline-block;
  background-color: #C0C0C0;
  border: none;
  text-decoration: none;
  padding: 10px 15px;
  cursor: pointer;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.button:hover {
  opacity: 0.8;
}
</style>
<a href="https://www.perdu.com/" class="button">Redirection</a>

Pour la deuxième solution :

$('.button').on('click', function () {
  window.location.href = 'https://www.perdu.com/';
}); // avec jQuery

document.querySelector('.button').addEventListener('click', function () {
  window.location.href = 'https://www.perdu.com/';
}); // sans jQuery

27/04/20 à 13h46
Modifié

+0 -0

ache, lundi 27 avril 2020 à 13h56
Modifié

Si une personne agréable pourrais me répondre en modifiant mon code pour que le button redirige sur un site ça serrait super ! Merci

Orga69300

Oulà, je suis pas très agréable mais je peux peut-être t’aider.

Ton code est incroyablement dur à lire. Le plus simple, c’est de ne pas utiliser button.

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
  </head>
  <body>
    <style>
     .button {
       border: none;
       height: 50%;
       width: 10%;
       display: block;
       text-align: center;
       cursor: pointer;
       outline: none;
       overflow: hidden;
       position: relative;
       color: white;
       font-weight: 600;
       font-size: 15px;
       background-color: #000000;
       padding: 15px 50px;
       margin: 0 auto;
     }
     .button span {
       position: relative; 
       z-index: 1;
     }
     .button:after {
       display: block;
       content: "";
       position: absolute;
       left: 0;
       top: 0;
       height: 580%;
       width: 140%;
       background: #0F0F0F;
       -webkit-transition: all .9s ease-in-out;
       transition: all .9s ease-in-out;
       -webkit-transform: translateX(-100%) translateY(-25%) rotate(45deg);
       transform: translateX(-100%) translateY(-25%) rotate(45deg);
     }
     .button:hover:after {
       -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
       transform: translateX(-9%) translateY(-25%) rotate(45deg);
     }
     </style>
     <div class="container">
       <a class="button" href="https://ache.one">
         <span>Redirection</span>
       </a>
     </div>
  </body>
</html>

Une balise a fait le taf. Sinon, tu aurais pus utiliser du JavaScript avec onclick="windows...." mais ce n’est pas recommander.

27/04/20 à 13h56
Modifié

ache.one 🦹 👾 🦊

+0 -0

anonyme, lundi 27 avril 2020 à 14h00
Modifié

@Yarflam Soit un formulaire en get vers perdu.com

Mais la meilleure solution reste d’utiliser un tag A. J’ai ce lien qui t’aidera à styliser le lien en bouton via du CSS : http://www.sciweavers.org/i2style

27/04/20 à 14h00
Modifié

+0 -0

anonyme, lundi 27 avril 2020 à 14h24

C’est très sale ! Le moindre champs avec un attribut name est envoyé à la page de destination … sans compter que si tu te plantes en mettant une méthode POST et qu’il est intercepté, tu es marron. Puis pour la SEO, n’en parlons même pas …

27/04/20 à 14h24

+0 -0

sgble, lundi 27 avril 2020 à 16h22
Modifié

J’ai un problème avec mon Button en HTML, j’aimerais qu’il fasse une redirection sur une autre page, mais je n’y arrive pas.

Ce que tu cherches s’appelle un lien. Comme dit plus haut, c’est faisable avec la balise <a href="LIEN">Texte du lien</a>.

Si tu veux le même design qu’un bouton, tu peux styliser ça en CSS. Il est à noter que les frameworks CSS comme Bootstrap permettent de styliser un lien en bouton en appliquant une classe class="button", dans le cas où tu serais amené(e) à en utiliser un.

27/04/20 à 16h22
Modifié

2×3²×5×37

+1 -0

ismailadventures, mercredi 19 janvier 2022 à 15h56

Salut je suis quelqu’un de très sympathique et je croix que je peux t’aider, alors tout ce que tu dois faire c’est envelopper la balise Button par une balise a(ça veut dire une balise lien) comme ceci :

 <button type="button" class="button">
 <span>Redirection</span>
 </button>

<a>

19/01/22 à 15h56

+0 -2

viki53, mardi 08 février 2022 à 10h16

@ismailadventures : Je pense que depuis 2 ans l’OP a trouvé une solution.

De plus, l’encapsulation que tu proposes n’est pas valide et risque surtout de créer des conflits dans le navigateur. Il vaut mieux choisir entre le lien ou le bouton.

08/02/22 à 10h16

Mes tutos / Blog d’un dev(ops) Web

+0 -0

Pas encore membre ?