Comment créer un lien avec un bouton HTML
Il existe plusieurs façons de créer un bouton HTML qui agit comme un lien (c’est-à-dire lorsque l’utilisateur clique dessus, l’utilisateur est redirigé vers l’URL spécifiée).
Vous pouvez choisir l’une des méthodes suivantes pour ajouter un lien à un bouton HTML.
1. Ajouter l’événement onclick sur la balise <button>
<!DOCTYPE html>
<html>
<head>
<title>Créer un lien avec un bouton HTML</title>
</head>
<body>
<button onclick="window.location.href = 'https://waytolearnx.com';"> Cliquez ici </button>
</body>
</html>
| Résultat |
|---|
2. Ajouter l’événement onclick sur la balise <input>
<!DOCTYPE html>
<html>
<head>
<title>Créer un lien avec un bouton HTML</title>
</head>
<body>
<input type="button" onclick="window.location.href = 'https://waytolearnx.com';" value="Cliquez ici"/>
</body>
</html>
| Résultat |
|---|
3. Utiliser l’attribut action du formulaire
<!DOCTYPE html>
<html>
<head>
<title>Créer un lien avec un bouton HTML</title>
</head>
<body>
<form action="https://waytolearnx.com">
<button type="submit">Cliquez ici</button>
</form>
</body>
</html>
| Résultat |
|---|
4. Bouton HTML qui agit comme un lien en utilisant CSS
<!DOCTYPE html>
<html>
<head>
<title>Créer un lien avec un bouton HTML</title>
<style>
.button {
background-color: #1c87c9;
box-shadow: 0 5px 0 #105cad;
color: white;
padding: 1em 1.5em;
position: relative;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<a href="https://waytolearnx.com" class="button">Cliquez ici</a>
</body>
</html>
| Résultat |
|---|
|
|
- Comment remplacer le Checkbox par un icone fontawesome
- Comment empêcher le redimensionnement d’un textarea en CSS
- Comment créer deux div côte à côte de la même hauteur en CSS
- Comment supprimer l’espace entre les cellules d’une colonne d’un tableau en CSS
- Comment placer une bordure à l’intérieur d’un bloc div en CSS
- Comment changer une image au survol avec CSS
- Comment rendre une DIV modifiable en HTML
- Comment changer la couleur du texte au survol en CSS
- Comment ajouter l’ombre sur un texte en CSS
- Comment ajouter l’ombre aux éléments HTML en CSS
- Comment créer un curseur personnalisé avec CSS
- Comment afficher du texte sur une image avec HTML / CSS
- Comment créer un lien avec un bouton HTML
- Comment supprimer l’espace blanc sous une image avec CSS
- Comment changer la transparence du background sans affecter le texte
- Comment créer une ligne verticale en HTML
- Comment changer l’aspect du curseur en CSS
- Comment redimensionner automatiquement une image pour l’adapter à un bloc DIV avec CSS
- Comment changer la couleur de la balise HR avec CSS
- Comment aligner un bloc DIV horizontalement avec CSS
- Comment définir la hauteur d’une DIV à 100% avec CSS
- Comment aligner le texte verticalement au centre d’une DIV avec CSS
- Comment ajuster la taille d’une div à son contenu en CSS
- Comment créer une liste sans puces en HTML
- Comment superposer une div sur une autre div avec CSS
- Comment redimensionner une image en background avec CSS
- Comment désactiver un lien en utilisant uniquement CSS
- Comment aligner verticalement une image dans une DIV en CSS
- Comment écrire des commentaires en CSS
- Comment écrire des commentaires en HTML
- Changer le bouton parcourir d’un input de type file avec CSS
- Personnaliser la balise select avec CSS
- Personnaliser les boutons checkbox avec CSS
- Personnaliser les boutons radio avec CSS
QCMs qui pourraient vous intéresser :
- Questions techniques sur MYSQL
- QCM MySQL Corrigé – Optimisation de requêtes
- QCM Base de données avec correction
- QCM sur PHP
- QCM Symfony
- QCM AngularJS
- QCM React
- QCM HTML / CSS
- QCM Java – Programmation Orientée Objet
- QCM Python
- QCM Cloud Computing
- QCM Framework Spring
- QCM Javascript
- QCM jQuery
- QCM Oracle
- QCM sur GIT – Gestionnaire de version
- QCM Linux – Gestion de processus
- QCM Réseau
- QCM Architecture des ordinateurs
- QCM Securité informatique
- QCM En Informatique Générale
- QCM en C
- QCM en C#
- QCM sur l'algorithmique
- QCM Word
- QCM Excel
- QCM PowerPoint
- QCM Access
Normally I do not learn post on blogs, however I wish to say that this write-up very forced me to take a look at and do so! Your writing style has been amazed me. Thanks, quite great article.
Merci😊