Moving Point around HTML Form in the Border

Written by @kerixa 6 March 2021

In all sites, forms elements are used to enter different parts of the site or to register information and send a request. For this reason, using forms with beautiful styles makes visitors more attracted. One of these styles is putting a moving point in the border of the forms and making them more attractive. See the code below and enjoy.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
/* css base : reset */
/* get negative value of a css variable : https://stackoverflow.com/a/48639938 */
:root {
    --elemSize: 5px;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: Tahoma;
    background: #d1d5da;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    background: #f6f8fa;
    padding: 2rem;
    border: var(--elemSize) solid #e1e4e8;
    position: relative;
}

.container::before {
	content: '';
	width: var(--elemSize);
	height: var(--elemSize);
	background: white;
	position: absolute;
	/* negative value */
	top: calc(-1 * var(--elemSize));
	left: calc(-1 * var(--elemSize));
	animation: borderAnime 5s infinite;
}

@keyframes borderAnime {
    0% {
        top: calc(-1 * var(--elemSize));
        left: calc(-1 * var(--elemSize))
    }

    25% {
        top: calc(-1 * var(--elemSize));
        left: 100%
    }

    50% {
        top: 100%;
        left: 100%
    }

    75% {
        top: 100%;
        left: calc(-1 * var(--elemSize))
    }
}

.container h1 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
}

.container a {
    display: inline-block;
    background: #0366d6;
    color: white;
    text-decoration: none;
    letter-spacing: 0.05rem;
    padding: 1rem 3rem;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<div class="container">
  <h1>New books out now!</h1>
  <a href="">Read the book now</a>
</div>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300