Fancy Line Box with content area

Fancy Line Box with content area.markdown

Fancy Line Box with content area

A Pen by Kael Steinert on CodePen.

License.

index.html

<div class="fancy-box">
  <div class="fancy-content">
    <h3>Fancy Box With Content Area</h3>
    <button type="button">Button</button>
  </div>
</div>

style.css

* {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}
html,
body {
  font-family: 'Open Sans', sans-serif;
  font-size:1em;
  line-height:1.4em;
}
body {
  background:#232120;
}
.fancy-box {
  position:relative;
  display:table;
  width:50%;
  min-height:300px;
  padding:20px;
  background-color:#A4CD63;
  background-color:rgba(164,205,99,1);
  margin:15px auto;
  text-align:center;
  color:#ffffff;
  z-index:10;
  -webkit-transition: background-color 0.4s ease;
  -moz-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}
.fancy-box:before,
.fancy-box:after {
  content:"";
  display:block;
  position:absolute;
  opacity:1;
  -moz-transition: opacity 0.4s, transform 0.4s;
  -webkit-transition: opacity 0.4s, transform 0.4s;
  transition: opacity 0.4s, transform 0.4s;
  z-index:11;
}
.fancy-box:before {
  top: 20px;
  right: 10px;
  bottom: 20px;
  left: 10px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.fancy-box:after {
  top: 10px;
  right: 20px;
  bottom: 10px;
  left: 20px;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}
.fancy-box:hover {
  background-color:rgba(164,205,99,0.5);
}
.fancy-box:hover:before,
.fancy-box:hover:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.fancy-box .fancy-content {
  display:table-cell;
  vertical-align:middle;
  width:100%;
  height:100%;
  position:relative;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:99;
  opacity:0;
  -moz-transition: opacity 0.4s;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}
.fancy-box:hover .fancy-content {
  opacity:1;
}
.fancy-box .fancy-content h3 {
  text-shadow:0 1px 5px rgba(0,0,0,0.5);
}
button {
  cursor:pointer;
}

styles

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" />