18056 sujets

Questions générales et questions de débutants

[Résolu] Ajouter un lien a un bouton

Bonjour

Voila .
je viens de télécharger un code html pour faire des boutons , et j'aimerais bien d'insérer un lien pour que ses boutons ouvres une autre page .

Merci bien

N.B je suis NUL dans la matière ( je suis plutôt littéraire).

le code

<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <link href="./style.css" rel="stylesheet"></link>
    <title>Document</title>

<style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

.container{
    width: 100%;
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
.btn{
    position: relative;
    padding: 1.5rem 2rem;
    font-size: 1.3rem;
    width: 15rem;
    border-radius: 50px;
    background: transparent;
    border: 2px solid var(--clr);
    color: var(--clr);
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    overflow: hidden;
    transition: 0.75s;
    z-index: 2;
    
}
.btn::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--clr);
    clip-path: circle(0% at 50% 50%);
    transition: 0.75s;
    z-index: -1;
    }
.btn:hover::after{
    clip-path: circle(100% at 50% 50%);
}

.btn:hover {
    color: black;
    box-shadow: 0 0 10px var(--clr),
    0 0 50px var(--clr);
    
}
</style>


</head>
<body>
    <div class="container">
        <!-- here --clr is css variable -->
        <button class="btn" style="--clr: yellow;">Get Started</button>
        <button class="btn" style="--clr: red;">Get Started</button>
        <button class="btn" style="--clr: #80D8FF;">Get Started</button>
    </div>
</body>
<script crossorigin="anonymous" integrity="sha512-aNMyYYxdIxIaot0Y1/PLuEu3eipGCmsEUBrUq+7aVyPGMFH8z0eTP0tkqAvv34fzN6z+201d3T8HPb1svWSKHQ==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
<script src="./script.js"></script>
</html>

Modifié par ouzou (05 Feb 2025 - 18:06)
Par exemple :
<div class="container">
        <!-- here --clr is css variable -->
        <a class="btn" href="lien" style="--clr: yellow;">Get Started</a>
        <a class="btn" href="lien" style="--clr: red;">Get Started</a>
        <a class="btn" href="lien" style="--clr: #80D8FF;">Get Started</a>
    </div>

À vous de choisir les liens qui vont. Le fond jaune est presque invisible.
Meilleure solution
Bonsoir, je viens de voir plusieurs erreurs dans votre code, passez votre code au validateur pour voir et corriger les erreurs de syntaxe => https://validator.w3.org/
La balise </meta> et la balise </link> n'existe pas.
Rien entre la balise </body> et la balise </html>.
casper2 a écrit :
Bonsoir, je viens de voir plusieurs erreurs dans votre code, passez votre code au validateur pour voir et corriger les erreurs de syntaxe =&gt; https://validator.w3.org/
La balise &lt;/meta&gt; et la balise &lt;/link&gt; n'existe pas.
Rien entre la balise &lt;/body&gt; et la balise &lt;/html&gt;.



Merci beaucoup

c'est trop pour moi Je suis nul dans la matières
Modifié par ouzou (05 Feb 2025 - 20:32)
Bongota a écrit :
Par exemple :
&lt;div class="container"&gt;
        &lt;!-- here --clr is css variable --&gt;
        &lt;a class="btn" href="lien" style="--clr: yellow;"&gt;Get Started&lt;/a&gt;
        &lt;a class="btn" href="lien" style="--clr: red;"&gt;Get Started&lt;/a&gt;
        &lt;a class="btn" href="lien" style="--clr: #80D8FF;"&gt;Get Started&lt;/a&gt;
    &lt;/div&gt;

À vous de choisir les liens qui vont. Le fond jaune est presque invisible.



ça marche et très bien ..
c'est très aimable de votre part
et un grand merci a vous et pour tout le monde et ..
Prévenir un modérateur
Répondre au sujet
Aller à