Button

Button .markdown

Button

A Pen by Monirul Islam on CodePen.

License.

index.html

div.container
  div.row
    div.mt
      a.btn.btn-custom.style1
        span.r.r1
        span.r.r2
        | Hellow World
        span.r.r3
        span.r.r4
      a.btn.btn-custom.style2
        span.r.r1
        span.r.r2
        | Hellow World
        span.r.r3
        span.r.r4   

style.css

@primary: #3598db;
@p: -4px;
@p-back: 0;
body{
  background: #e74c3c;
}
.trans{
  -webkit-transition: all .5s ease-out ;
    -moz-transition: all .5s ease-out ;
    -o-transition: all .55s ease-out ;
    transition: all .5s ease-out ;
}
.mt{
  margin-top: 100px;
  text-align: center;
}
.btn{
  margin-right: 30px;
}
.btn-custom{
  border: 1px solid #212121;
  border-radius: 0;
  padding: 20px 40px;
  font-size: 20px;
  color: #212121;
  position: relative;
  .trans;
}
.r{
    position: absolute;
    width: 8px;
    height: 8px;
    display: inline-block;
    background: #212121;
    .trans;
    
  }
.r1{
  top: @p;
  left: @p;
}
.r2{
  bottom: @p;
  left: @p;
}

.r3{
  top: @p;
  right: @p;
}
.r4{
  bottom: @p;
  right: @p;
}

//hover styles
.btn-custom.style1{
  &:hover{
    background: @primary;
    color: #fff;
    border-color: #fff;
    .r{
        background: #fff;
      }
      .r1{
        top: @p-back;
        left: @p-back;
      }
      .r2{
        bottom: @p-back;
        left: @p-back;
      }

      .r3{
        top: @p-back;
        right: @p-back;
      }
      .r4{
        bottom: @p-back;
        right: @p-back;
      }
  }
}

//this one is unfinished
.btn-custom.style2{
  &:hover{
    background: @primary;
    color: #fff;
    border-color: #fff;
      
      .r1{
        top: auto;
        bottom: @p;
        left: @p;
        background: red !important;
      }
    .r2{
        bottom: auto;
        top: @p;
        left: @p;
      }

  }
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />