Artem_A,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background-color: #FF00FF;
}
.header_menu a {
color: #fff;
font: 18px 'Open Sans';
text-decoration: none;
padding: 8px 17px;
margin: -1px;
border: 1px solid transparent;
border-radius: 50px;
}
.header_menu .active {
transition: .8s all ease-in-out;
padding: 8px 17px;
border-color: #fff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$(document.body).on("click", ".header_menu a", function(){
$('.header_menu .active').removeClass('active');
$(this).addClass('active')
});
});
</script>
</head>
<body>
<nav class="header_menu">
<a href="#">Hello</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Team</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
</body>
</html>