Scribd Logo
Upload

Welcome to Scribd!

  • Codgio Boton de Envio

    Uploaded by

    santiago123diaz2
    6 views2 pages
    The document contains HTML, CSS, and JavaScript code to create an interactive submit button. The button changes styles and text on click from "Submit" to a tick mark SVG. When clicked, the button toggles a class that animates the button container and text over 0.9 seconds.

    Original Description:

    Original Title

    codgio boton de envio

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains HTML, CSS, and JavaScript code to create an interactive submit button. The button changes styles and text on click from "Submit" to a tick mark SVG. When clicked, the button toggles a class that animates the button container and text over 0.9 seconds.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views2 pages

    Codgio Boton de Envio

    Uploaded by

    santiago123diaz2
    The document contains HTML, CSS, and JavaScript code to create an interactive submit button. The button changes styles and text on click from "Submit" to a tick mark SVG. When clicked, the button toggles a class that animates the button container and text over 0.9 seconds.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    html

    <div class="button">
    <div class="container">
    <div class="tick">
    </div>
    </div>
    </div>
    <link rel="stylesheet" href="BOTON6.CSS">

    <script src="./boton6.js"></script>

    css
    body, .button, .tick {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    }

    body {
    width: 100%;
    height: 90vh;
    }

    .button {
    width: 300px;
    height: 80px;
    background: dodgerblue;
    border-radius: 6px;
    transition: all .3s cubic-bezier(0.67, 0.17, 0.40, 0.83);
    }

    .button svg {
    transform: rotate(180deg);
    transition: all .5s;
    }

    .button__circle {
    width: 120px;
    height: 120px;
    background: mediumseagreen;
    border-radius: 50%;
    transform: rotate(-180deg);
    }

    .button:hover {
    cursor: pointer;
    }

    .tick {
    color: white;
    font-size: 2em;
    transition: all .9s;
    }

    javascrip
    let button = document.querySelector('.button');
    let buttonText = document.querySelector('.tick');

    const tickMark = "<svg width=\"58\" height=\"45\" viewBox=\"0 0 58 45\"


    xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"#fff\" fill-rule=\"nonzero\"
    d=\"M19.11 44.64L.27 25.81l5.66-5.66 13.18 13.18L52.07.38l5.65 5.65\"/></svg>";

    buttonText.innerHTML = "Submit";

    button.addEventListener('click', function() {

    if (buttonText.innerHTML !== "Submit") {


    buttonText.innerHTML = "Submit";
    } else if (buttonText.innerHTML === "Submit") {
    buttonText.innerHTML = tickMark;
    }
    this.classList.toggle('button__circle');
    });

    You might also like