breadcunb arrow style code

by Kheema Pandey

HTML

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

CSS

.arrow {
    background: #8ec63f;
    color: #fff;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    position: relative;
    }
    .arrow:before,
    .arrow:after {
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    }
    .arrow:before {
    border-bottom: 15px solid #8ec63f;
    border-left: 15px solid transparent;
    border-top: 15px solid #8ec63f;
    left: -15px;
    }
    .arrow:after {
    border-bottom: 15px solid transparent;
    border-left: 15px solid #8ec63f;
    border-top: 15px solid transparent;
    right: -15px;
    }
    .arrow:hover {
    background: #f7941d;
    color: #fff;
    }
    .arrow:hover:before {
    border-bottom: 15px solid #f7941d;
    border-top: 15px solid #f7941d;
    }
    .arrow:hover:after {
    border-left: 15px solid #f7941d;
    }