Designer circle with text overlay.html

Designer circle with text overlay.html

<style>
.circle-ul {
    list-style: none outside none;
display: block;
    
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
text-align: center;
}
.circle-ul li.it1 {
    background: url(http://www.creditsuite.com/images/index3.jpg) no-repeat;
    background-size: 100%;
}
.circle-ul li.it2 {
    background: url(http://www.creditsuite.com/images/index2.jpg) no-repeat;
    background-size: 100%;
}
.circle-ul li {
    width: 400px;
    height: 400px;
}
.circle-ul li {
    display: inline-block;
    vertical-align: top;
    
    border-radius: 50%;
    position: relative;
    border: 18px solid #fff;
    margin-right: 4%;
    overflow: hidden;
    box-shadow: inset 0px 1px 6px #666;
    z-index: 1;
}
.circle-ul li a {
    padding: 70px 58px 70px 58px;
    top: -18px;
    position: absolute;
    margin-left: -230px;
    color: #fff;
    text-decoration: none;
}
.bt {
    margin-top: 215px;
}
.bt {
    background: #03b8d2;
    overflow: hidden;
    width: 500px;
    position: relative;
    text-align: center;
    margin-left: -72px;
    
    height: 140px;
    z-index: 0;
}

.bt:hover {
    background: rgb(69, 84, 86);}

.bt h2 {
    font-family: 'Pathway Gothic One';
    letter-spacing: -1px;
    font-size: 18px;
    line-height: 20px;
    font-weight: 400;
    width: 200px;
    text-align: center;
    text-transform: uppercase;
    margin-left: -100px;
    left: 50%;
    position: relative;
}
.item-arrow {
    background: #ffffff;
    width: 40px;
    height: 32px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    left: 50%;
    margin-left: -20px;
    color: #03b8d2;
    font-size: 20px;
    padding-top: 3px;
}
em-arrow em {
    margin-left: 0;
}
.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
   
}
.fa-chevron-right:before {
    content: "\f054";
}
</style>

<ul class=circle-ul>
            <li class="it1"><a href="/business-credit">
            <div class="bt">
            <h2 style="color:#fff;">Business Credit Solutions</h2>
            <div class="item-arrow"><em class="fa fa-chevron-right"></em></div>
            </div>
            </a>
            </li>
            <li class="it2"><a href="/financing">
            <div class="bt">
            <h2 style="color:#fff;">Funding Solutions</h2>
            <div class="item-arrow"><em class="fa fa-chevron-right"></em></div>
            </div>
            </a>
            </li>
</ul>