CODEWITHSUNDEEP
htmlbutton
Andres Camilo De Los Rios
Andres Camilo De Los Rios

Reputation: 21

Button that redirects to another Page

I need this button to redirect me to another Link, and also keeps the gradient with it, its using Pure html, is ther a way to do, and also keeping it with the Font.

For later adding it into a embend notion file. Its a really weird idea, and im new with coding. Thank u so much.

<!DOCTYPE html>
    <html>
    <head> 
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,800&display=swap" rel="stylesheet">
    <style>
    
    .button {
     
        background: #ef577d;
        background: -moz-linear-gradient(left, #AB70E8 0%, #EF577D 50%, #FB8C54 100%);
        background: -webkit-linear-gradient(left, #AB70E8 0%, #EF577D 50%, #FB8C54 100%);
        background: linear-gradient(to right, #AB70E8 0%, #EF577D 50%, #FB8C54 100%);
        margin: 40px;
        font-family: 'Montserrat', sans-serif;
        font-size: 25px;
        padding: 30px;
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 140% auto;
        color: #FFF;
        box-shadow: 0 0 10px #ef577d;
        border-radius: 10px;
        width: 600px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        cursor: pointer;
        display: inline-block;
        border-radius: 40px;
    }
    
    .button:hover {
      background-color: #ef577d;
    }
    </style>
    <button onclick="button">Hacer</button>
    
    
    
    </a>
    
    </body>
    </html>

Upvotes: 1

Views: 151

Answers (3)

Mahshad
Mahshad

Reputation: 89

try putting button inside a tag, put the link you need to be directed in href and add styles the gradient and more to your button

   <a href=""><button></button></a>

Upvotes: 0

Andres Camilo De Los Rios
Andres Camilo De Los Rios

Reputation: 21

I found this solution

<button class="button" onclick="location.href='#'">hacer</button>

Upvotes: 1

Fuzzer
Fuzzer

Reputation: 1

Try using "a" tag instead of button tag, onclick can be added to "a" tag.

<a href="#" onclick="button">Hacer</a>

Upvotes: 0

Related Questions