En son web geliştirme öğreticiler
×

CSS Eğitimi

CSS EV CSS Giriş CSS Sözdizimi CSS Nasıl CSS Renkler CSS Arka CSS Kenarlıklar CSS Kenar boşlukları CSS Dolgu malzemesi CSS Yükseklik genişlik CSS Metin CSS Yazı CSS Bağlantılar CSS Listeler CSS Tablolar CSS Kutu Modeli CSS Özeti CSS Gösterimi CSS Maksimum genişlik CSS Konumu CSS şamandıra CSS Inline-block CSS hizalama CSS combinators CSS Sözde sınıf CSS Sözde elemanı CSS Gezinti çubuğu CSS Açılır menülerde CSS Araç ipuçları CSS Resim Galerisi CSS Görüntüdeki Opaklık CSS Görüntü Spritleri CSS Attr Seçicileri CSS Formları CSS Sayaçlar

CSS3

CSS3 Giriş CSS3 Yuvarlatılmış köşeler CSS3 Sınır Resimleri CSS3 Arka CSS3 Renkler CSS3 Renk Geçişleri CSS3 Gölgeler CSS3 Metin CSS3 Yazı CSS3 2D Dönüşümler CSS3 3D Dönüşümler CSS3 Geçişler CSS3 Animasyonlar CSS3 Görüntüler CSS3 Düğmeler CSS3 sayfalara numara koyma CSS3 Birden Çok Sütun CSS3 Kullanıcı arayüzü CSS3 Kutu Boyutlandırma CSS3 Flexbox CSS3 Medya Sorguları CSS3 MQ Örnekleri

CSS Duyarlı Web Tasarımı

Duyarlı Web Tasarımı giriş Duyarlı Web Tasarımı Görünüm Duyarlı Web Tasarımı Izgara Görünümü Duyarlı Web Tasarımı Medya Sorguları Duyarlı Web Tasarımı Görüntüler Duyarlı Web Tasarımı Videolar Duyarlı Web Tasarımı çerçeveler

CSS Examples

CSS Örnekler CSS bilgi yarışması CSS sertifika

CSS References

CSS Referans CSS Seçiciler CSS Fonksiyonlar CSS Referans Resmi CSS Web Safe Yazı CSS canlandırılabilir CSS Birimler CSS PX-EM Dönüştürücü CSS Renkler CSS Renk Değerleri CSS Renkli İsimler CSS3 Tarayıcı Desteği

 

CSS Düğmeler


CSS kullanarak düğmeleri stilini ayarlamayı öğrenin.


Temel Düğme Şekillendirme

Örnek

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
Kendin dene "

Düğme Renkleri

Kullanım background-color bir düğmeye arka plan rengini değiştirmek için özellik:

Örnek

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
Kendin dene "

Düğme Boyutları

Kullanım font-size bir düğmeye boyutunu değiştirmek için özellik:

Örnek

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Kendin dene "

Yuvarlak Düğmeler

Kullanım border-radius bir düğmeye yuvarlatılmış köşeler eklemek için özellik:

Örnek

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Kendin dene "

Renkli Düğme Sınırlar

Kullan border bir düğmeye renkli bir çerçeve eklemek için özellik:

Örnek

.button1 {
    background-color: white;
    color: black;
    border: 2px solid #4CAF50; /* Green */
}
...
Kendin dene "

Hoverable Düğmeler


Kullan :hover bunun üzerine fareyi getirdiğinizde bir düğme stilini değiştirmek için seçici.

İpucu: kullan transition-duration hızını belirlemek için özellik "hover" etkisi:

Örnek

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
...
Kendin dene "

Gölge Düğmeler

Kullanım box-shadow bir düğmeye gölge eklemek için özellik:

Örnek

.button1 {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
Kendin dene "

Engelli Düğmeler

Kullanım opacity bir düğmeye şeffaflık eklemek özelliği (a yaratır "disabled" bir görünüm).

İpucu: Ayrıca ekleyebilir cursor değeriyle özellik "not-allowed" Bir gösterecek olan "no parking sign" ne zaman düğmenin üzerine fare:

Örnek

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
Kendin dene "

Düğme Genişliği


Varsayılan olarak, düğmenin boyutu (kadar geniş içeriği gibi) metin içeriği ile belirlenir. Kullanım width bir düğmeye genişliğini değiştirmek için özellik:

Örnek

.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
Kendin dene "

Düğme Grupları


Marjlarını çıkarıp eklemek float:left bir düğme grubu oluşturmak için her düğmeye:

Örnek

.button {
    float: left;
}
Kendin dene "

Bordered Düğme Grupları


Kullan border bir bordürlü düğme grubu oluşturmak için özellik:

Örnek

.button {
    float: left;
    border: 1px solid green
}
Kendin dene "

Hareketli Düğmeler

Örnek

Üzerine giderek bir ok ekleyin:

Kendin dene "

Örnek

Bir ekleme "ripple" tıklamada etkisi:

Kendin dene "

Örnek

Bir ekleme "pressed" tıklamada etkisi:

Kendin dene "