<nav>

<div class="nav-wizard  nav-active">
<h4>01</h4>
<span class="line-v1"></span>
<span class="line-v2"></span>
<p>
	General <br> information
	</p>
</div>
	<div class="nav-wizard ">
<h4>02</h4>
<span class="line-v1"></span>
<span class="line-v2"></span>
<p>
	General <br> information
	</p>
</div>
	<div class="nav-wizard ">
<h4>03</h4>
<span class="line-v1"></span>
<span class="line-v2"></span>
<p>
	General <br> information
	</p>
</div>
	<div class="nav-wizard nav-review">
<h4>REVIEW</h4>
<span class="line-v1"></span>
<span class="line-v2"></span>
<p>
	 <br><br> 
	</p>
</div>
	
	
</nav>
	
@import url('https://fonts.googleapis.com/css?family=Oswald');

body {
  background-color: #fff;
}

nav {
  width: 500px;
  margin: 0 auto;
  vertical-align: middle;
  margin-top: 5%;
}

.nav-wizard {
  width: 80px;
  font-family: 'Oswald', sans-serif;
  padding: 4px;
  border: 1px solid #fff;
  transition: 0.3s all ease;
  display: inline-block;
  color: #cacaca;
  position: relative;
  transition: all ease 0.3s;
	
  &:after {
    background-color: #fff;
    width: 10px;
    height: 10px;
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
  }
	
  &:hover {
    animation: mymove 0s 3;
    width: 120px;
    transition: 0.3s all ease;
    border: 1px solid #cacaca;
		
    &:after {
      background-color: #26b06a;
      transition: 0.3s all ease;
    }
		
    .line-v2 {
      transition: all ease 0.3s;
      width: 60%;
    }
		
    h4 {
      color: #26b06a;
      transition: all ease 0.3s;
    }
  }
}

.nav-review {
  width: 120px;
  &:hover {
    width: 160px;
  }
}

.nav-wizard {
	
  .line-v1, .line-v2 {
    width: 80%;
    height: 2px;
    background-color: #cacaca;
    display: block;
    margin-top: 5px;
    transition: all ease 0.3s;
  }
	
  h4 {
    margin: 0px;
    font-size: 35px;
    transition: all ease 0.3s;
  }
	
  p {
    margin: 0px;
    font-size: 15px;
    margin-top: 5px;
  }
}

.nav-active{
	width:120px;
	border: 1px solid #cacaca;
	
	h4{
		color:#26b06a;
	}
	
	&:after{
		background-color:#26b06a;
	}
}

@keyframes mymove {
   	0% 		{ border:1px solid #000 }
		10%		{ border:1px solid #d0d0d0 }
		20%		{ border:1px solid #000 }
		30%		{ border:1px solid #d0d0d0 }
		40%		{ border:1px solid #000 }
		50%		{ border:1px solid #d0d0d0 }
		60%		{ border:1px solid #000 }
		70%		{ border:1px solid #d0d0d0 }
		80%		{ border:1px solid #000 }
		90%		{ border:1px solid #d0d0d0 }
    100% 	{ border:1px solid #000 }
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.