HTML5 ve CSS3 ile Button Örnekleri

Daha önceki yazılarımda HTML5’in yeni elemanlarını tanımıştık. Şimdi onlardan birini, aside’ı kullanarak birkaç button hazırlayalım.

Beraberinde CSS3 ile aramıza katılan çerçeve özgünleştirme özelliklerini de kullanacağız. Ve tabiki :before :after bölümleri ile objelerimizin sol ve sağ taraflarında farklı farklı stiller oluşturacağız.

Aside nasıl kullanılır?

HTML 5 offers a new element to mark additional information that can enhance an article but isn’t necessarily key to understanding it.

Yukarıda da anlatıldığı aside çeşitli metinlere destek amaçlı oluşturulabilecek küçük anlatımlardır. Yazının altında duran alıntı metinler gibi olduğu söylenebilir. Kullanılması zorunlu değildir fakat uzun makalelerde anlaşılabilirliğin arttırılması için tavsiye edilir. Biz ise yeni kod birimini button olarak kullanacağız. HTML5’in temelinde aside’ın button işlevine dair bir anlatım yok. Fakat HTML5’in sunduğu en büyük yenilik özgürlük!

ÖRNEĞİ GÖRÜNTÜLE

Yavaş yavaş başlayalım.

İlk olarak aside için tanımlamamızı yapalım. Bu CSS kodlarını tüm örnekler için kullanmanız gerekir. Yani ilk olarak aşağıdaki kodları sitenize eklemekle başlamalısınız :

aside {
width: 160px;
font: 20px Arial,Helvetica,sans-serif;
color:white;
text-shadow:#333 1px 1px;
margin: 20px 0;
line-height: 34px;
position: relative;
cursor: pointer;
user-select: none;
}

aside:before, aside:after {
content: '';
position: absolute;
height: 0;
width: 0;
border-style: solid;
border-width: 0;
}

Şimdi bu taslak üzerinden örneklerimizi görelim.

Kırmızı Kurdele Örneği

CSS Kodları

aside.kurdela {
background-color: #b52c2c;
}

aside.kurdela:before, aside.kurdela:after {
top: 5px;
z-index: -10;
}

aside.kurdela:before {
border-color: #942a2a #942a2a #942a2a transparent;
left: -25px;
border-width: 17px;
}

aside.kurdela:after {
border-color: #942a2a transparent #942a2a #942a2a;
right: -25px;
border-width: 17px;
}

HTML Kodları

<aside class='kurdela'>Kurdela</aside>

Mavi Kristal Örneği

CSS Kodları

aside.kristal {
background-color: #2f84c6;
}

aside.kristal:after, aside.kristal:before {
border-color: transparent #2f84c6;
}

aside.kristal:before {
left: -17px;
border-width: 17px 17px 17px 0;
}

aside.kristal:after {
right: -17px;
border-width: 17px 0 17px 17px;
}

HTML Kodları

<aside class='kristal'>Kristal</aside>

Yeşil Ok Örneği

CSS Kodları

aside.ok {
background-color: #72c62f;
}

aside.ok:after, aside.ok:before {
border-width: 17px 0 17px 17px;
}

aside.ok:before {
border-color: #72c62f transparent;
left: -17px;
}

aside.ok:after {
border-color: transparent #72c62f;
right: -17px;
}

HTML Kodları

<aside class='ok'>Ok</aside>

Sarı Köşeli Örnek

CSS Kodları

aside.koseli {
background-color: #c69d2f;
border-radius: 25px/17px;
left: -20px;
width: 200px;
}

HTML Kodları

<aside class='koseli'>Köşeli</aside>

Mor Eğik Örnek

CSS Kodları

aside.egik {
background-color: #6b2fc6;
left: -5px;
width: 170px;
}

aside.egik:after, aside.egik:before {
border-width: 34px 10px 0 0;
}

aside.egik:before {
left: -10px;
border-color: transparent #6b2fc6;
}

aside.egik:after {
right: -10px;
border-color: #6b2fc6 transparent;
}

HTML Kodları

<aside class='egik'>Eğik</aside>

Notlar

1. aside kodunun temeli küçük dipnotlardır. Fakat Bu şekilde farklı amaçlarla kullanılması SEO değeriniz açısından bir problem yaratmayacaktır.
2. İsteğe bağlı olarak aside, etiketler için bile kullanılabilir.