Fun with Ghost Buttons

In this example below you will see how to do a Fun with Ghost Buttons with some HTML / CSS and Javascript

This awesome code was written by praliedutzel, you can see more from this user in the personal repository.
You can find the original code on
Copyright praliedutzel ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Fun with Ghost Buttons</title>
      <link rel="stylesheet" href="css/style.css">



  <header class="header">
  <h1 class="header__title">Fun with Ghost Buttons</h1>
<!--   <a href="#" target="_blank">Read the Article</a> -->

<button type="button" class="ghost ghost--offset-borders">Offset Borders</button>

<!-- <button type="button" class="ghost ghost--offset-stripes">Offset Stripes</button> -->



/*Downloaded from */
.ghost {
  background-color: transparent;
  margin: 25px;
  padding: 15px 20px;
  position: relative;
  border: none;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  color: #2ECC40;
  transition: all 0.3s;
  backface-visibility: hidden;

.ghost--offset-borders:before, .ghost--offset-borders:after {
  content: '';
  position: absolute;
  background: transparent;
  width: 100%;
  height: 100%;
  border: 1px solid #2ECC40;
  transition: transform 0.3s ease-in-out;
.ghost--offset-borders:before {
  top: 0;
  left: 0;
  transform: translate(-2px, -2px);
.ghost--offset-borders:after {
  right: 0;
  bottom: 0;
  transform: translate(2px, 2px);
.ghost--offset-borders:hover:before, .ghost--offset-borders:focus:before, .ghost--offset-borders:active:before {
  transform: translate(-4px, -4px);
.ghost--offset-borders:hover:after, .ghost--offset-borders:focus:after, .ghost--offset-borders:active:after {
  transform: translate(4px, 4px);

*, *:before, *:after {
  box-sizing: border-box;

body {
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
  text-align: center;

.header {
  background-color: #232439;
  margin-bottom: 2rem;
  padding: 4rem 2rem;
  text-align: center;
.header a {
  margin-top: 1rem;
  display: block;
  color: #6ddce5;
  font-size: 0.85rem;
  text-decoration: none;

.header__title {
  margin: 0;
  color: #fff;
  font-weight: 300;