DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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. ❀️

Top comments (1)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.