CSS Ghost Button by Texx

ghostButton.css

.ghost-button {
  display: inline-block;
  width: 200px;   /*  replace with left and right padding for bigger buttons  */
  padding: 8px;
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  outline: none;
  text-decoration: none;
  font-weight:bold;
}

.dark-ghost-button {
  display: inline-block;
  width: 200px;  /*  replace with left and right padding for bigger buttons  */
  padding: 8px;
  color: #111 !important;
  border: 2px solid #111;
  text-align: center;
  outline: none;
  text-decoration: none;
  font-weight:bold;
}
.ghost-button:hover,
.ghost-button:active {
  background-color: #fff;
  color: #111;
}
.dark-ghost-button a:link   {
	color:#111 !important;
}
.dark-ghost-button:hover,
.dark-ghost-button:active {
  background-color: #111;
  color: #fff !important;
}

Both the light and the dark version are included here.

Revised by changing the color of the border and text on ghost-button. It looked good for its original purpose, elsewhere the text was hard to read.

hmmm, why can't I edit this?