HTML'de Buton Rengi Nasıl Değiştirilir?

Ortak yazarlar Travis Boylls

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.

Yöntem 1 / 2:

HTML Kullanmak

1
HTML'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.
2
Buton etiketinde "button"dan sonra style= yaz. Bu, buton etiketinde stil ögeleri olduğunu gösterir. Tüm stil ögeleri "=" işaretinden sonra yerleştirilir.
3
Eş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) seçerek kopyala ve buton etiketine yapıştır.
- Arka plan rengi olarak "transparent" (şeffaf) da kullanabilirsin.^{[1]
  X
  Kaynağı araştır}
6
Arka 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.
8
Kenarlı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.
9
Kenarlı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.
11
Bir rengin adını veya onaltılık kodunu yaz. Bu, stil ögesinde "color:"dan sonra yazılır. Bu, butondaki metnin rengini belirler.
12
Tü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.
13
Stil ögelerinden sonra > yaz. Bu, açma butonu etiketini kapatır.
14
Buton 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.
15
Buton 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

1
HTML 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 verilerini, 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.
3
Style (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]
X
Kaynağı araştır}
- Açılış etiketi olarak .button:hover { ile ayrı bir stil sayfası oluşturarak fare imlecini butonun üzerine getirdiğinde de buton renginin değişmesini de sağlayabilirsin.
4
background-color: yaz. Bu, buton stili sayfasında ayrı bir satıra yazılır. Bu öge, butonun arka plan rengini kontrol eder.
5
Bir 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) seçerek kopyala ve buton etiketine yapıştır.
- Arka planı görünmez yapmak için arka plan rengi olarak "transparent" (şeffaf) da yazabilirsin.
6
border-color: yaz. Bu öge, butonun etrafındaki kenarlığın rengini kontrol eder. Bunu butonun stil sayfasında ayrı bir satıra yaz.
7
Bir 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.
8
color: yaz. Bunu stil sayfasında ayrı bir satıra yaz. Bu öge, butondaki metnin rengini kontrol eder.
9
Bir 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.
10
Ayrı 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.
11
CSS'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.
13
HTML 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