Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..)

Bu yazımızda web sitelerinde sıklıkla gördüğümüz ve kullandığımız butonlardan bahsedeceğim. Html ve Css ile buton yapımı konusuna geçmeden önce buton ne demek yani buton nedir bunu anlamaya çalışalım. 

Butonları birden fazla amaç için kullanabiliyoruz. Tabi bu amaca göre de buton oluştururken kullandığımız Html etiketleri değişebiliyor. Öncelikle sadece Html kullanarak buton nasıl oluşturulur inceledikten sonra Css kodları yazarak bu butonlara nasıl stiller verebileceğimize bakalım.

HTML İLE BUTON OLUŞTURMA

Hiç Css kodu yazmadan kullanış amacımıza göre şu şekilde butonlar yapabiliriz.

 ⇒  Örneğin bir butona tıklandığında bir olayı yakalama vb.. gibi durumlarda,

Html etiketini kullanıyoruz.

 ⇒  Bir form doldurulduktan sonra Gönder butonuna tıklandığında formdaki bilgileri sunucuya gönderme vb.. durumlarda,

Html etiketini kullanıyoruz.

 ⇒  Sayfalar arası geçişler için veya herhangi bir adrese link vermek için buton görünümlü linkler oluşturmak istiyorsak,

Html etiketini kullanıyoruz.

Bu 3 şekilde oluşan basit buton, submit buton ve link butonun görünümü şu şekilde.

html-buton-yapma-html-buton-olusturma

Şimdi de bu Html etiketlerine Css özellikleri ile stiller vererek daha güzel görünümler elde edelim.

CSS İLE BUTON YAPIMI 

En basit haliyle buton oluşturmak için genelde şu Css özelliklerini kullanıyoruz.

  • width
  • height
  • background-color
  • color  
  • border

Bunların dışında butonun köşelerinin oval olmasını veya tam yuvarlak olmasını istiyorsak,

  • border-radius

özelliğini kullanıyoruz.

Daha ileri seviye buton yapımı (3d Buton, Animasyonlu butonlar vb..) için bazı ileri seviye Css3 özelliklerini kullanmamız gerekiyor.

Şimdi hem temel seviyede hem de ileri seviyede buton çeşitlerini ve buton örneklerini inceleyelim.

 Önemli :  İcon kullandığımız buton örnekleri için Font Awesome Versiyon 5.3.1’i kullanıyorum. Sizde icon kullanarak buton oluşturmak isterseniz Html sayfanızın <head> </head> etiketleri arasına aşağıdaki CDN linkini eklemeyi unutmayın. Font Awesome hakkında daha fazla bilgi edinmek için tıklayınız.  

 ⇒  Örneklere geçmeden önce şunu da belirteyim. Hiç Css kodu yazmadan da butonlarımızı oluşturabiliriz. Bunun için birçok framework bulunuyor. Dünya genelinde en popüler olanı ise Bootstrap‘tır.

Bootstrap hakkında daha fazla bilgi almak isterseniz BOOTSTRAP NEDİR? BOOTSTRAP NASIL KULLANILIR? yazımı okuyabilirsiniz.

Bootstrap ile butonları nasıl yapabileceğimizi öğrenmek için ise BOOTSTRAP 4 – BUTTONS (BUTONLAR) yazımı inceleyebilirsiniz.

BASİT BUTON YAPMA 

Html Kodları

Css Kodları

Görünümü

css-buton-ornekleri

KÖŞELERİ YUVARLATILMIŞ VEYA TAM YUVARLAK BUTON YAPMA

Html Kodları

Css Kodları

Görünümü

yuvarlak-buton-yapma

İCON KULLANARAK BUTON OLUŞTURMA

Html Kodları

Css Kodları

Görünümü

html-buton-kodlari-buton-cesitleri

İCON KULLANARAK BİLDİRİM BUTONU OLUŞTURMA

Html Kodları

Css Kodları

Görünümü

css-buton-cesitleri

3D (ÜÇ BOYUTLU) BUTON ÖRNEKLERİ – 1

Html Kodları

Css Kodları

Görünümü

3d-buton-animasyonlu-buton-ornekleri

3D (ÜÇ BOYUTLU) BUTON ÖRNEKLERİ – 2

Html Kodları

Css Kodları

Görünümü

3d-buton-animasyonlu-butonlar

ANİMASYONLU BUTON ÖRNEKLERİ – 1

Html Kodları

Css Kodları

Görünümü

animasyonlu-buton-ornekleri

ANİMASYONLU BUTON ÖRNEKLERİ – 2

Html Kodları

Css Kodları

Görünümü

html-css-buton-kodlari

Umarım sizin için yararlı bir yazı olmuştur.

Şu yazılarda ilginizi çekebilir.

Html ve Css ile Sosyal Medya Butonları Yapımı 

Css ile Html Ortalama (Yazı, Resim, Form, Tablo, Sayfa, Menü vb..)

Css ile Toggle Switch Yapımı 

Jquery ile Beğendim – Beğenmedim Uygulaması

Jquery ile Butona Tıklayınca Metin Kutusundaki Sayıyı Artırmak ve Azaltmak

Yeni bir yazımda görüşmek üzere.

2 Yorum

  1. hüseyin uslu Ağustos 1, 2019 Cevapla
    • admin Ağustos 2, 2019

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link