Home
Programming

Menu Hover with Cool Animated Border Pure CSS

Syiainfoku make a Menu Hover with Cool Animated Border Pure CSS
Menu Hover Animated Border

Hello !

Welcome back, with me the founder of Syiainfoku. You will learn together on the Syiainfoku blog how to make a Menu Hover Animated Border and this effect pure HTML, CSS no JavaScript.

Ok, let's get started.

Preview Menu Hover Animated Border

Preview Menu Hover Animated Border

More or less the result will be like in the picture above

Source Code and Brief Explanation

To make this program [Menu Hover Animated Border]. First you need to create two Files, one HTML File and one CSS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Menu Hover Animated Border from the given download button.

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu Hover Animated Border | hitoricoding</title>
  <link rel="stylesheet" href="assets/style.css">
</head>

<body>

  <nav>
    <a href="#" class="hover-awsm">
      <span>
        <span>Home</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>

    <a href="#" class="hover-awsm">
      <span>
        <span>Blog</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>

    <a href="#" class="hover-awsm">
      <span>
        <span>Work</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>

    <a href="#" class="hover-awsm">
      <span>
        <span>About</span>
        <span>Hover</span>
        <span></span>
      </span>
    </a>

  </nav>
</body>

</html>

Finally, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #090921;
}

nav {
  display: flex;
  justify-content: center;
  margin-top: 250px;
}

/* === MENU HOVER ANIMATED BORDER === */
.hover-awsm {
  margin: 0px 3px;
  width: 210px;
  background-color: transparent;
  cursor: pointer;
  border-color: #bdc3c7;
}

.hover-awsm:hover {
  border-color: #C672E9;
}

.hover-awsm span:nth-child(1) {
  color: #FCFCFC;
}

.hover-awsm span:nth-child(2) {
  color: #C672E9;
}

.hover-awsm span {
  font-family: 'Lato', sans-serif;
  font-size: 28px;
  letter-spacing: 3px;
}

.hover-awsm {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  border-style: none;
  height: 65px;
  display: inline-block;
}

.hover-awsm span {
  position: absolute;
  box-sizing: border-box;
  display: block;
}

.hover-awsm>span>span:nth-child(3),
.hover-awsm:before,
.hover-awsm:after,
.hover-awsm>:first-child,
.hover-awsm>:first-child:before,
.hover-awsm>:first-child:after {
  border-color: inherit;
  display: block;
  -moz-transition: border-color 0.3s ease;
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}

.hover-awsm:before,
.hover-awsm:after,
.hover-awsm>:first-child:before,
.hover-awsm>:first-child:after {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  position: absolute;
  box-sizing: border-box;
  content: ' ';
}

.hover-awsm>span>span:nth-child(3),
.hover-awsm:before,
.hover-awsm:after,
.hover-awsm>:first-child:before,
.hover-awsm>:first-child:after {
  border-width: 3px;
}

.hover-awsm>span>span:nth-child(3) {
  border-radius: 3px;
}

.hover-awsm:before {
  border-radius: 3px 0 0 3px;
}

.hover-awsm:after {
  border-radius: 0 3px 3px 0;
}

.hover-awsm>:first-child:before {
  border-radius: 3px 3px 0 0;
}

.hover-awsm>:first-child:after {
  border-radius: 0 0 3px 3px;
}

.hover-awsm>:first-child {
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
}

.hover-awsm>span span {
  width: inherit;
  text-align: center;
  -moz-transition: opacity 0.6s ease, top 0.5s ease;
  -webkit-transition: opacity 0.6s ease, top 0.5s ease;
  transition: opacity 0.6s ease, top 0.5s ease;
}

.hover-awsm>span>span:nth-child(1) {
  opacity: 1;
  top: 18px;
}

.hover-awsm>span>span:nth-child(2) {
  top: 37px;
  opacity: 0;
}

.hover-awsm:hover>span>span:nth-child(1) {
  opacity: 0;
  top: 2px;
}

.hover-awsm:hover>span>span:nth-child(2) {
  opacity: 1;
  top: 18px;
}

.hover-awsm>span>span:nth-child(3) {
  top: 28%;
  height: 44%;
  width: inherit;
  border-style: none solid none solid;
}

.hover-awsm:before,
.hover-awsm:after {
  top: 0;
  width: 0;
  height: inherit;
  border-style: solid none solid none;
}

.hover-awsm>:first-child:before,
.hover-awsm>:first-child:after {
  left: 0;
  height: 0;
  width: inherit;
  border-style: none solid none solid;
}

.hover-awsm:before {
  -webkit-animation-name: left-center;
  animation-name: left-center;
}

.hover-awsm:after {
  -webkit-animation-name: right-center;
  animation-name: right-center;
}

.hover-awsm>:first-child:before {
  -webkit-animation-name: center-top;
  animation-name: center-top;
}

.hover-awsm>:first-child:after {
  -webkit-animation-name: center-bottom;
  animation-name: center-bottom;
}

.hover-awsm:hover:before {
  -webkit-animation-name: center-left;
  animation-name: center-left;
}

.hover-awsm:hover:after {
  -webkit-animation-name: center-right;
  animation-name: center-right;
}

.hover-awsm:hover>:first-child:before {
  -webkit-animation-name: top-center;
  animation-name: top-center;
}

.hover-awsm:hover>:first-child:after {
  -webkit-animation-name: bottom-center;
  animation-name: bottom-center;
}

/* ==== KEYFRAMES === */
@-webkit-keyframes center-left{0%{left:40%;width:8%;opacity:.2}25%{left:25%;width:15%}50%{left:0;width:30%}80%{left:0;width:0%}100%{left:0;width:0%;opacity:1}}@-webkit-keyframes left-center{0%{left:0;width:0%;opacity:1}20%{left:0;width:0%}50%{left:0;width:30%}55%{left:40%;width:11%}100%{left:43%;width:8%;opacity:.2}}@-webkit-keyframes center-right{0%{left:52%;width:8%;opacity:.2}25%{left:60%;width:15%}50%{left:70%;width:30%}80%{left:100%;width:0%}100%{left:100%;width:0%;opacity:1}}@-webkit-keyframes right-center{0%{left:100%;width:0%;opacity:1}20%{left:100%;width:0%}50%{left:70%;width:30%}55%{left:49%;width:11%}100%{left:49%;width:8%;opacity:.2}}@-webkit-keyframes top-center{0%{top:0;height:0%;opacity:.2}50%{top:0;height:0%}60%{top:0;height:20%}80%{top:0;height:50%}90%{top:25%;height:25%}100%{top:50%;height:0%;opacity:1}}@-webkit-keyframes center-top{0%{top:50%;height:0%;opacity:1}10%{top:25%;height:25%}20%{top:0;height:50%}40%{top:0;height:20%}50%{top:0;height:0%}100%{top:0;height:0%;opacity:.2}}@-webkit-keyframes bottom-center{0%{top:100%;height:0%;opacity:.2}50%{top:100%;height:0%}60%{top:80%;height:20%}80%{top:50%;height:50%}90%{top:50%;height:25%}100%{top:50%;height:0%;opacity:1}}@-webkit-keyframes center-bottom{0%{top:50%;height:0%;opacity:1}10%{top:50%;height:25%}20%{top:50%;height:50%}40%{top:80%;height:20%}50%{top:100%;height:0%}100%{top:100%;height:0%;opacity:.2}}@keyframes center-left{0%{left:40%;width:8%;opacity:.2}25%{left:25%;width:15%}50%{left:0;width:30%}80%{left:0;width:0%}100%{left:0;width:0%;opacity:1}}@keyframes left-center{0%{left:0;width:0%;opacity:1}20%{left:0;width:0%}50%{left:0;width:30%}55%{left:40%;width:11%}100%{left:43%;width:8%;opacity:.2}}@keyframes center-right{0%{left:52%;width:8%;opacity:.2}25%{left:60%;width:15%}50%{left:70%;width:30%}80%{left:100%;width:0%}100%{left:100%;width:0%;opacity:1}}@keyframes right-center{0%{left:100%;width:0%;opacity:1}20%{left:100%;width:0%}50%{left:70%;width:30%}55%{left:49%;width:11%}100%{left:49%;width:8%;opacity:.2}}@keyframes top-center{0%{top:0;height:0%;opacity:.2}50%{top:0;height:0%}60%{top:0;height:20%}80%{top:0;height:50%}90%{top:25%;height:25%}100%{top:50%;height:0%;opacity:1}}@keyframes center-top{0%{top:50%;height:0%;opacity:1}10%{top:25%;height:25%}20%{top:0;height:50%}40%{top:0;height:20%}50%{top:0;height:0%}100%{top:0;height:0%;opacity:.2}}@keyframes bottom-center{0%{top:100%;height:0%;opacity:.2}50%{top:100%;height:0%}60%{top:80%;height:20%}80%{top:50%;height:50%}90%{top:50%;height:25%}100%{top:50%;height:0%;opacity:1}}@keyframes center-bottom{0%{top:50%;height:0%;opacity:1}10%{top:50%;height:25%}20%{top:50%;height:50%}40%{top:80%;height:20%}50%{top:100%;height:0%}100%{top:100%;height:0%;opacity:.2}}

That's it, now you have successfully created a Menu Hover Animated Border, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. For the source code I saved it on MediaFire, It's free and a .zip file will be downloaded then you have to extract it.

Download 

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Post a Comment