CSS ile Devamını Oku Butonu Tasarımı

Basit bir CSS kodlama örneği yaptım, umarım yardımcı olur.

<div class="btnContainer">

<h3 class="btnTitle">Devamını Oku Buton alanı başlık metnini buraya yazın</h3>

<a href="#" title="Devamını Oku Buton Başlığı" class="btnReadMore"> Devamını Oku &gt;</a>

</div>

<style>

.btnContainer{

  background-color:#2f2f2f;

  color:#fefefe;

  text-align:center;

  padding:1% 2%;

  font-family:Arial;

}

.btnTitle{

font-size:24px;

    line-height:100%;

}

.btnReadMore{

display:block;

    background-color:#dedede;

    color:#2f2f2f;

    width:50%;

    max-width:170px;

    text-align:center;

    text-decoration:none;

    margin:20px auto;

    font-family:Arial;

    font-size:16px;

    padding:10px 2px;

    border-radius:2px;

    -webkit-border-radius:2px;

    -moz-border-radius:2px;

}

</style>

Kodların çalışan hali

Devamını Oku Buton alanı başlık metnini buraya yazın

Devamını Oku >