HTML Butona Link Verme - Tasarım Kodlama

Trang chủ » Html Butona Tıklayınca Başka Sayfaya Yönlendirme » HTML Butona Link Verme - Tasarım Kodlama

Có thể bạn quan tâm

Merhaba arkadaşlar bu yazıda ekrandaki bir butona tıkladığımızda a( bağlantı/link) etiketi gibi bir sayfaya nasıl yönlendireceğimizi öğreneceğiz.

Butona link verme işlemini bir kaç farklı senaryo için aşağıdaki gibi değerlendireceğiz.

Durum 1. Satır içi onclick etkinliği ekleyin–

<!DOCTYPE html> <html> <head> <title>TasarimKodlama.com</title> </head> <body> <button onclick="window.location.href = 'https://www.tasarimkodlama.com';">Tıkla ve Git</button> </body> </html>
1234567891011 <!DOCTYPE html><html><head><title>TasarimKodlama.com</title></head><body><button onclick="window.location.href = 'https://www.tasarimkodlama.com';">Tıkla ve Git</button></body></html>

Eğer butonunuzu süslemek isterseniz aşağıdaki CSS kodlarını kullanarak butonun tasarımını değiştirebilirsiniz.

CSS

<style> button{ background-color: #ff7675; color:#2d3436; padding:20px; border:2px #d63031 solid; font-size:1.5em; border-radius: 5px; } </style>
12345678910111213 <style> button{background-color:#ff7675;color:#2d3436;padding:20px;border:2px#d63031solid;font-size:1.5em;border-radius:5px;}</style>

Çıktı:

html butona link verme
html butona link verme

Durum 2 <input> etiketine onclick etkinliği ekleme örneği–

<!DOCTYPE html> <html> <head> <title>Tasarım Kodlama</title> </head> <body> <form> <input type="button" onclick="window.location.href = 'https://www.tasarimkodlama.com';" value="TasarımKodlama.com"/> </form> </body> </html>
12345678910111213 <!DOCTYPE html><html><head><title>Tasarım Kodlama</title></head><body><form><input type="button"onclick="window.location.href = 'https://www.tasarimkodlama.com';"value="TasarımKodlama.com"/></form></body></html>

Durum 3 <form> öğesinde eylem veya formaction özniteliklerini kullanma–

<!DOCTYPE html> <html> <head> <title>Tasarım Kodlama</title> </head> <body> <form action="https://www.tasarimkodlama.com/"> <button type="submit">Tıkla ve Git</button> </form> </body> </html>
12345678910111213 <!DOCTYPE html><html><head><title>Tasarım Kodlama</title></head><body><form action="https://www.tasarimkodlama.com/"><button type="submit">Tıkla ve Git</button></form></body></html>

Durum 4  Bağlantıyı button olarak biçimlendirin–

<!DOCTYPE html> <html> <head> <title>Tasarım Kodlama</title> <style> .button { background-color: #1c87c9; border: none; color: white; padding: 20px 34px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; margin: 4px 2px; cursor: pointer; } </style> </head> <body> <a href="https://www.tasarimkodlama.com/" class="button">Tıkla ve Gör</a> </body> </html>
12345678910111213141516171819202122232425 <!DOCTYPE html><html><head><title>Tasarım Kodlama</title> <style>.button {background-color:#1c87c9;border:none;color:white;padding:20px34px;text-align:center;text-decoration:none;display:inline-block;font-size:20px;margin:4px2px;cursor:pointer;}</style></head><body><a href="https://www.tasarimkodlama.com/"class="button">Tıkla ve Gör</a></body></html>

Çıktı:

HTML Button link verme
HTML Button link verme
EtiketlerJavaScript Sayfaya Yönlendirme Link Verme

Từ khóa » Html Butona Tıklayınca Başka Sayfaya Yönlendirme