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–
|
1 2 3 4 5 6 7 8 9 10 11 |
<!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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style> button{ background-color: #ff7675; color:#2d3436; padding:20px; border:2px #d63031 solid; font-size:1.5em; border-radius: 5px; } </style> |
Çıktı:
Durum 2 <input> etiketine onclick etkinliği ekleme örneği–
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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–
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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–
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!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> |
Çıktı:
Yorum Yap