Skip to main content

Archive

Show more

Minimalist Navigation With Flash Effect | Rustcode

by Rustcode
Minimalist-Navigation-With-Flash-Effect-HTML-And-CSS

Minimalist Navigation With Flash Effect Using HTML And CSS

In this article, we have created a separate playlist of the navigation bar, you can learn all these navigation bars. In this blog, we again learn how to create navigation with the flash effect. you can use this effect on buttons or links.

This animation has four links in the navbar when you hover on them the flash effect will be created. This effect is generated using html and css.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.

You can read interesting articles on web development. The link is given below.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Minimalist Navigation With Flash Effect | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Minimalist Navigation With Flash Effect | Rustcode</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <nav class="navbar">
      <div>
        <button data-text="Home">
        <span>Home</span>
        </button>
        <button data-text="Projects">
        <span>Projects</span>
        </button>
        <button data-text="About">
        <span>About</span>
        </button>
        <button data-text="Contact">
        <span>Contact</span>
        </button>
      </div>
    </nav>
  </body>
</html>



03. CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0px;
}

.navbar div {
  --ease-out-transition: 0.25s ease-out;
  --ease-in-transition: 0.75s 0.1s cubic-bezier(0.25, 1, 0.75, 1);
  width: 28rem;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar button {
  position: relative;
  padding: 0px;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  font-weight: bold;
}

.navbar button>span {
  opacity: 1;
  transition: var(--ease-in-transition);
}

.navbar button::after {
  position: absolute;
  content: attr(data-text);
  top: 0px;
  left: 0px;
  transform: translateY(35%);
  opacity: 0;
  transition: var(--ease-out-transition);
}

.navbar button:hover {
  border-bottom: 1px solid #4F4F4F;
}

.navbar button:hover>span {
  transform: translateY(35%);
  opacity: 0;
  transition: var(--ease-out-transition);
}

.navbar button:hover::after {
  transform: translateY(0%);
  opacity: 1;
  transition: var(--ease-in-transition);
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment