Blogger için css buton oluşturma

Blogger buton eklentisi oluşturma

Bloglar için kullanılan butonları, kolaylık olsun diye css tanımlarıyla birleştirip demo ve download gibi butonlar ortaya çıkarıcaz. CSS tanımlarıyla oluşturduğumuz bu  çok amaçlı butonlar renk ve hover özelliğini alt kısımda verdiğim renkli kod yerleşkesinde renk kodunu belirleyerek rengini değiştirebilirsiniz. İlk olarak div ismi belirleyelim, div ismini bloga ve blogb veriyorum.

css butonlar
<div class="bloga"><a href="http://demo">Demo</a></div> <div class="blogb"><a href="http://download">Download </a> <div>
Bunlar sadece link verilmiş divlerimiz şimdi bunları tanımlayan CSS kodlarına geçicez, her biri için farklı css kodları hazırlayalım. İlk olarak 'bloga' buton için tanım belirleyelim renk, kenarlık, alan açısı, yazı büyüklüğü, arka plan gibi tanımlar kullanıcaz.

CSS buton bloga için:
.bloga a{margin-right: 5px; a display: inline-block; height: 30px; width: 100px; line-height: 30px; padding: 7px 10px; border-radius: 8px 0 0 8px; font-size: 14px; border: solid 1px #4c4c4c; background-color: #0084b4; color: white; }

Burada radius yani kenar eğimi kullanarak farklı bir kombin yapalım.

CSS buton blogb için:
.blogb a{ display: inline-block; height: 30px; width: 100px; line-height: 30px; padding: 7px 10px; border-radius: 0 8px 8px 0; font-size: 14px; border: solid 1px #4c4c4c; background-color: #82b440; color: white; }

Bu buton için de CSS kodlarımızı hazırladık şimdi her ikisinide kapsayan yeni bir div oluşturalım, bu divimizin ismide blogg olsun.

bloga, blogb kapsamı:
<div class="blogg"> <div class="bloga"><a href="http://demo">demo</a></div> <div class="blogb"><a href="http://download">download </a> <div></div>
Olay burada bitmiyor şimdide düzene oturtmak için kapsama divimizin CSS kodlarını kullanalım.
.blogg { position: relative; margin: auto; display: flex; text-align: center; width: 240px;}
En son olarak hover özeeliğimizide ekleyerek bitiriyoruz. Bu butona eklediğim hover özelliği her iki buton içinde aynı tanımları içeriyor siz isterseniz farklı hover tanımlarıyla stillerde değişiklik yapabilirsiniz.
.bloga :hover{ background-color: #f7f7f7; color: #230f0f; }
.blogb :hover{ background-color: #f7f7f7; color: #230f0f; }
Evet artık bu butonları dilediğiniz gibi kullanabilirsiniz. İster demo ve download olarak, isterseniz oyun ve eklentilerin önizlemesinde.

Yorumlar

Bu blogdaki popüler yayınlar

Kod editörü araçlarini özelleştirme

Google bağlantı yolu arama motoru