X
Bu makaledeki ortak yazarlar Travis Boylls. Travis Boylls, wikiHow’da Teknoloji Yazarı ve Editör’dür. Travis teknoloji makaleleri yazma, müşteri hizmetleri yazılımı sağlama ve grafik tasarım konularında deneyime sahiptir. Windows, macOS, Android, iOS ve Linux platformlarında uzmandır. Pikes Peak Toplum Fakültesi’nde grafik tasarım eğitimi almıştır.
Bu wikiHow makalesi sana, HTML'de bir butonun rengini nasıl değiştireceğini öğretir. Standart HTML kullanarak veya HTML5'te CSS (Basamaklı Stil Sayfaları) kullanarak bir butonun rengini değiştirebilirsin.
Adımlar
Yöntem 1 / 2:
HTML Kullanmak
Yöntem 1 / 2:
-
1HTML'inin gövdesine <button yaz. Bu, HTML kodunun buton etiketinin başlangıcıdır. HTML'nin gövdesi, <body> ve </body> etiketleri arasındaki alandır. Gövde, bir İnternet sayfasının görünür ögelerinin HTML kullanılarak yerleştirildiği yerdir.
-
2Buton etiketinde "button"dan sonra style= yaz. Bu, buton etiketinde stil ögeleri olduğunu gösterir. Tüm stil ögeleri "=" işaretinden sonra yerleştirilir.
-
3Eşittir (=) işaretinden sonra bir tırnak işareti (") ekle. HTML buton etiketindeki tüm stil ögelerinin tırnak işaretleri arasına yerleştirilmesi gerekir.
-
4"style="dan sonra tırnakların içine background-color: yaz. Bu öge, butonun arka plan rengini değiştirmek için kullanılır.
-
5"background-color:"dan sonra bir renk adı veya onaltılık kod yaz. Bir rengin adını (mavi gibi) veya onaltılık bir rengi yazabilirsin.
- Onaltılık bir kod bulmak için bir İnternet tarayıcısında https://www.google.com/search?q=color+picker adresine git. Bir renk seçmek için alttaki kaydırma çubuğunu kullan. Bir renk tonu seçmek için penceredeki daireyi kullan. Soldaki kenar çubuğundaki 6 basamaklı kodu (kare işareti dâhil) vurgulayıp kopyala ve buton etiketine yapıştır.
- Arka plan rengi olarak "transparent" (şeffaf) da kullanabilirsin.[1]
-
6Arka plan renginden sonra bir noktalı virgül (;) yaz. HTML buton etiketindeki farklı stil ögelerini ayırmak için noktalı virgül kullan.
-
7"style="dan sonra tırnakların içine border-color: yaz. Bu öge, butonun etrafındaki kenarlığın rengini belirlemek için kullanılır. Stil ögelerini tırnak işaretleri içine, "style ="dan sonra herhangi bir sırayla yerleştirebilirsin. Her ögenin bir noktalı virgül (;) ile ayrılması gerekir.
-
8Kenarlık rengi için bir renk adı veya onaltılık kod yaz. Kenarlığın renk adı veya onaltılı kodu "border-color:" ögesinden sonra yazılır.
- Kenarlığı kaldırmak istersen "border-color:" ögesinin yerine border:none yaz.
-
9Kenarlık renginden sonra bir noktalı virgül (;) yaz. HTML buton etiketindeki farklı stil ögelerini ayırmak için noktalı virgül kullan.
-
10"style="dan sonra tırnakların içine color: yaz. Bu öge, butondaki metnin rengini değiştirmek için kullanılır. Stil ögelerini tırnak işaretlerinin içine, "style ="dan sonra herhangi bir sırayla yerleştirebilirsin. Her ögenin bir noktalı virgül (;) ile ayrılması gerekir.
-
11Bir rengin adını veya onaltılık kodunu yaz. Bu, stil ögesinde "color:"dan sonra yazılır. Bu, butondaki metnin rengini belirler.
-
12Tüm stil ögelerinden sonra bir tırnak işareti (") yaz. Tüm stil ögelerin, buton etiketinde "style="dan sonra tırnak işaretleri içinde olmalıdır. Tüm stil ögelerini eklemeyi bitirdiğinde onları kapatmak için sona bir tırnak işareti (") yaz.
-
13Stil ögelerinden sonra > yaz. Bu, butonun açma etiketini kapatır.
-
14Buton etiketinden sonra buton metnini yaz. Butonun için açılış etiketini oluşturmayı bitirdikten sonra, butonda görünmesini istediğin metni etiketten sonra yaz.
-
15Buton metninden sonra </button> yaz. Bu, butonunun kapanış etiketidir. Butonun tamamlandı. HTML kodunun şuna benzemesi gerekir.
<!DOCTYPE html> <html> <body> <button style="background-color:red; border-color:blue; color:white">Buton Metni</button> </body> </html>
Reklam
Yöntem 2 / 2:
CSS Kullanmak
Yöntem 2 / 2:
-
1HTML belgesinin en üstüne <head> yaz. Bu, HTML belgen için bir başlık oluşturur. Belgenin başlığı, İnternet sayfanda görünmeyen bilgilerin yerleştirildiği yerdir. Bu; meta verileri, sayfanın başlığını ve stil sayfalarını içerir.
-
2<style> yaz. Bu etiket, basamaklı stil sayfaları (CSS) için İnternet sayfana bir konum ekler. Bu bölüm, HTML belgenin başına gelir.
- Bazı HTML belgeleri haricî bir stil sayfası kullanır. Bu durumda, haricî CSS dosyasının konumunu bulman ve bu belgedeki buton stil sayfalarını düzenlemen gerekir.
-
3Style (stil) bölümünden sonra ayrı bir satıra .button { yaz. Bu, stil oluşturduğun buton için stil sayfasını açar. [2]
- Açılış etiketi olarak .button:hover { ile ayrı bir stil sayfası oluşturarak fare imlecini butonuna üzerine getirdiğinde de buton renginin değişmesini de sağlayabilirsin.
-
4background-color: yaz. Bu, buton stili sayfasında ayrı bir satıra yazılır. Bu öge, butonun arka plan rengini kontrol eder.
-
5Bir rengin adını veya onaltılık kodunu, ardından noktalı virgül (;) yaz. Buton stil sayfasındaki "background-color:" ögesinden sonra bunu yaz. Bu, butonun arka plan rengini belirtir.
- Onaltılık bir kod bulmak için bir İnternet tarayıcısında https://www.google.com/search?q=color+picker adresine git. Bir renk seçmek için alttaki kaydırma çubuğunu kullan. Bir renk tonu seçmek için penceredeki daireyi kullan. Soldaki kenar çubuğundaki 6 basamaklı kodu (kare işareti dâhil) vurgulayıp kopyala ve buton etiketine yapıştır.
- Arka planı görünmez yapmak için arka plan rengi olarak "transparent" (şeffaf) da yazabilirsin.
-
6border-color: yaz. Bu öge, butonun etrafındaki kenarlığın rengini kontrol eder. Bunu butonun stil sayfasında ayrı bir satıra yaz.
-
7Bir rengin adını veya onaltılık kodunu, ardından noktalı virgül (;) yaz. Bu, butonun etrafındaki kenarlığın rengini belirler. Bu, buton stil sayfasındaki "border-color:" ögesinden sonra yazılır.
- Kenarlığı kaldırmak istersen "border-color:renkadi" ögesinin yerine border:none yaz.
-
8color: yaz. Bunu stil sayfasında ayrı bir satıra yaz. Bu öge, butondaki metnin rengini kontrol eder.
-
9Bir rengin adını veya onaltılık kodunu, ardından noktalı virgül (;) yaz. Bu, buton içindeki metnin rengini belirler. Bu, buton stil sayfasında "color:" ögesinden sonra yazılır.
-
10Ayrı bir satıra } yaz. Bu, butonunun stil sayfasını kapatır. Her bir butona benzersiz bir ad verdiğin sürece birden çok buton stil sayfası oluşturabilirsin.
-
11CSS'ini bitirdikten sonra </style> yaz. Tüm stil sayfalarını oluşturmayı bitirdikten sonra HTML belgenin style (stil) bölümünü kapatmak için ayrı bir satıra "</style>" yaz.
-
12</head> yaz. Bu, HTML belgenin başlığını kapatır.
-
13HTML belgenin gövdesine <a href="url" class="button">button text</a> yaz. Bu, HTML belgenin Style (Stil) bölümünde belirtilen stil sayfalarını kullanarak HTML'nin görünen kısmına bir buton ekler. "Url" yi butonun bağlandığı İnternet adresiyle değiştir. HTML belgenin gövdesi, HTML belgenin <body> ve </body> etiketlerinin arasında olur. HTML kodunun şöyle görünmesi gerekir:
<!DOCTYPE html> <html> <head> <style> .button { background-color:blue; border-color:red; color:white; } </style> </head> <body> <a href="https://www.wikihow.com" class="button">Ana Sayfa</a> </body> </html>
Reklam
Referanslar
Bu wikiHow makalesi hakkında
Diğer dillerde
English:Change the Button Color in HTML
Bahasa Indonesia:Mengubah Warna Tombol pada HTML
日本語:HTMLでボタンの色を変更する
Português:Alterar a Cor de um Botão em HTML
Tiếng Việt:Đổi màu button trong HTML
Bu sayfaya 30 defa erişilmiş.
Bu makale işine yaradı mı?
Reklam