Fluid Arrow with cross

by Kheema Pandey

HTML

<a class="arrow" href="#">Continue Reading  </a>

CSS

body{padding:15px;}  
.arrow {
    background: #8ec63f;
    color: #fff;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 30px 0 10px;
    min-width:120px;
    position: relative;
    border-radius: 4px;
    border: 1px solid #8ec63f;

    }
    .arrow:before {
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    }
    .arrow:before {
    border-bottom: 15px solid transparent;
    border-right: 15px solid #8ec63f;
    border-top: 15px solid transparent;
    left: -15px; 
    }


.arrow:after
{
  content:"x";
  font-size:1.5em;
  position:absolute; 
  top:0;
  right:4px;
  padding:0 0 15px;
}

   .arrow:hover {
    background: #f7941d;
    color: #fff;
     border-radius: 4px;
    border: 1px solid #f7941d;
    }
    .arrow:hover:before {
    border-bottom: 15px solid transparent;
    border-top: 15px solid transparent;;
    border-right: 15px solid #f7941d;
    }