<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.