DEV Community 👩‍💻👨‍💻

Designyff
Designyff

Posted on • Originally published at designyff.com

Step-by-step guide - Input with animation

Input button

HTML

For HTML we need a container with input and button with "edit" svg.

Click on button will trigger the toggle.

<div class="container">
    <input type="text" class="input">
    <button onclick="toggle()" class="edit">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            height="15"
            fill="none"
            viewBox="0 0 24 24"
            stroke="#02a8f4"
            stroke-width="2">
            <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
        </svg>
    </button>
</div>
Enter fullscreen mode Exit fullscreen mode

Javascript

For javascript, we'll have a variable that stores the button state (edit mode or not) and we'll create a toggle function.

First we'll select all elements (button, input and container) and set edit mode to opposite of what it was (edit = !edit).

Now, if edit is true, we'll change button's svg to check icon, we'll focus the input and set "active" class to it and we'll change container's border color to light green.

If edit is false, we'll set button's svg back to edit icon and remove the "active" class, and set container's background color back to blue.

let edit = false

function toggle() {
    let btn = document.getElementsByClassName('edit')[0]
    let input = document.getElementsByClassName('input')[0]
    let container = document.getElementsByClassName('container')[0]

    edit = !edit

    if (edit) {
        btn.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" height="15" fill="none" viewBox="0 0 24 24" stroke="#32ffcc" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                </svg>`
        input.focus()
        input.classList.add('active')
        container.style.borderColor = '#32ffcc'
    } else {
        btn.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" height="15" fill="none" viewBox="0 0 24 24" stroke="#02a8f4" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
            </svg>`
        input.classList.remove('active')
        container.style.borderColor = '#02a8f4'
    }
}
Enter fullscreen mode Exit fullscreen mode

CSS

For CSS, first we'll style the container. We'll set border to blue with radius of 15 px.

Then we'll align elements inside using flexbox, and add some paddings.

.container {
    border: 1px solid #02a8f4;
    display: flex;
    border-radius: 15px;
    padding: 5px;
}
Enter fullscreen mode Exit fullscreen mode

For button, we'll set paddings to 0 and remove the default border by setting border property to none.

We'll also remove default background color and set it to transparent.

Now, we'll set cursor to pointer and display the svg in the center of the button using flexbox.

button {
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Now we'll style the input. We'll set paddings and width to 0. This is the style of inactive button.

We'll set background property to transparent and remove default border and set it to 15 px radius.

Also, let's remove the outline and add a little transition.

.input {
    padding: 0;
    width: 0;
    background-color: transparent;
    border: none;
    border-radius: 15px;
    outline: none;
    transition: 0.5s;
}
Enter fullscreen mode Exit fullscreen mode

Now the "active" class. This class will be appended to input element when button is active.

We'll set width to 100px (remember before we set this to 0) and add some X paddings and right margin (a little space between input and svg).

And we'll add a little transition.

.active {
    width: 100px;
    padding: 0 5px;
    margin-right: 5px;
    transition: 0.5s;
}
Enter fullscreen mode Exit fullscreen mode

And that's it.

You can find video tutorial and full code here.

That you for reading. ❤️

Oldest comments (1)

We want your help! Become a Tag Moderator.
Check out this survey and help us moderate our community by becoming a tag moderator here at DEV.