<div>
<h1>Ghost Button</h1>
<a class="btn" href="#">Hello</a>
<a class="btn" href="#">Click Me</a>
</div>
@import url(https://fonts.googleapis.com/css?family=Lato:400,800,600);

body{
   font-family: 'Lato', sans-serif;
 background-image: url("https://images.unsplash.com/photo-1469157605283-e7b4bf248171?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=900&q=80");
background-size: cover;
 background-repeat: no-repeat;
  text-align:center;
}
div {
  position: relative;
  top:7%;
  left: 30%;
  right: 30%;
}

h1 {
  color: #fff;
}

.btn {
    text-decoration: none;
    font-size: 150%;
    font-weight:100;
  color:#fff;
    border: 1px solid #fff;
    padding: 0.65em 1.7em;
    display: inline-block;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
  margin:0 15px 0 0;
 
}
a.btn:hover{
  background:#fff;color: #000;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.