Button css bài viết

 

**** HTML

<div class="home-news-box posR">

<div class="news__date clearfix ">

        <div class="news__date__month">Oct</div>

        <div class="news__date__day">04</div>

    </div>

</div> 

****CSS

.news__date {

    background-color: #9e0b0f;

    color: #fff;

    line-height: 1;

    padding: 7px 10px;

    position: absolute;

    right: -10px;

    z-index: 9;

    text-align: center;

    top: 10px;

}

.news__date::before {

    background-color: rgba(250, 250, 250, 0.5);

    content: "";

    height: 2px;

    position: absolute;

    right: calc(50% - 10px);

    top: 7px;

    width: 20px;

}

.news__date__month {

    font-size: 10px;

    font-weight: bold;

    margin-bottom: 3px;

    margin-top: 10px;

    text-transform: uppercase;

}

.news__date__day {

    font-size: 16px;

    text-align: center;

    display: block;

    font-family: Verdana, Geneva, sans-serif;

}

.news__date::after {

    border-color: #bf1926 transparent transparent;

    border-style: solid;

    border-width: 9px 10px 0 0;

    bottom: -9px;

    content: "";

    height: 0;

    position: absolute;

    right: 0;

    width: 0;

}