gbrEPV

gbrEPV.markdown

gbrEPV

A Pen by numbnet on CodePen.

License.

index.html

<div id="container">
  <a href="#home" class="button"><span>Home</span></a>
  <a href="#products" class="button"><span>Products</span></a>
  <a href="#about" class="button"><span>About</span></a>
  <a href="#contact" class="button"><span>Contact</span></a>
</div>

script.js

$(".button").click(function() {
  $(".active").removeClass("active");
  $(this).addClass("active");
});

style.css

* {
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  outline: none;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  
  font-family: sans-serif;
  
  background: linear-gradient(135deg, #f28, #4ae);
}

#container {
  display: inline-block;
  
  width: 100%;
  height: 100%;
  
  padding: 2em;
  
  text-align: center;
}

a.button {
  display: inline-block;
  
  min-width: 5em;
  
  margin-right: 1ex;
  
  position: relative;
  top: calc(50% - 1em);
  
  text-align: center;
  font-size: 1.28em;
  
  background: rgba(0, 0, 0, 0.1);
  
  border: 2px solid white;
  
  transition: background 0.32s ease-in-out, box-shadow 0.32s ease-in-out;
}

a.button span {
  display: inline-block;
  
  width: 100%;
  height: 100%;
  
  padding: 1ex;
  
  color: white;
  
  transition: color 0.32s ease-in-out;
}
a.button:hover, a.button:focus, a.button.active {
  background: white;
  
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.48);
}
a.button:hover span, a.button:focus span, a.button.active span {
  color: #444;
}