Bilgiler
  • Ekleyen:
  • Ayberk Atasay
  • Tarih:
  • March 9, 2022
  • Kategori:
  • CSS
  • Paylas:
CSS Cift Renkli Button Ornegi

Uzun aradan sonra yeniden merhabalar. Basit ama ise yarayabilecek bir kod paylasmak icin tekrar dustuk buralara

Malum is hayati kisisel zevklerime vakit ayirmama fazla musaade etmiyor. Ama yine de firsat buldukca ufak ufak birseyler yapabiliyorum.
Bugun de basit bir CSS ile buton yapma uzerine yazi paylasmak istedim. Bu butonu ilk calistigim otel icin yaptigim bir uygulamada "Yeni" linki icin kullanmistim. Burada klasiklerin disinda goze hos gelebilecek cift renkli bir dugme olmasi icin denemistim. Genel olarak da memnunum.

Ilk olarak CSS kodlarimiz;
a.button {
position:relative;
text-decoration:none;
background-color: white;
box-shadow: 1px 1px 3px #ddd;
font-size:13px;
color:#003243;
padding: 5 5 5 23;
border: 1px solid #bbb;
}

a.button span {
position: absolute;
left: 0;
top:0;
padding:0.2em 5px;
background-color:#ddd;
text-align:center;
font-size:13px;
font-weight:bold;
}

a.button:hover {
text-decoration:none;
background-color: #24b6e3;
color:#fff;
}

a.button:hover span {
background-color: #003243;
color:#fff;
}

Simdi de HTML kodlarimiz;

<a href="#link" class="button"><span>+</span> NEW</a>

Yakinda yine yeni yazilarda gorusmek uzere...
Yorumlar