HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css links style
css links examples
css styling link
css style link
css styling a links
css styling for links
css styling for link
css link text decoration
css a link text decoration
css no text decoration on links
css link background color,css link background color transparent
css link hover background color
css selected link background color
css visited link background color
css active link background color
css change link background color
css link buttons examples
css button link verme
css link button
css link button style
css link as button
css link as button style
css buttons as link
css a link button
css a link button style
link css for button
css link in button
css links color
css links class

CSS Links

CSS Links

Web sitenizin pek çok yerinde linkler olacaktır.Bu linkler hep aynı tip olmayacak çeşitli şekillerde ve biçimlerde olacaktır. Bu biçim ve şekilleri css dili ile yine aynı şekilde şekillendireceğiz. Bu biçimlerden kastım; altı çizili yazı yada tam tersi altı çizgisiz yazı, çerçeveli buton ve içi dolu yazılı bir buton şeklinde değişik tipde linkleri sık sık kullanacaksınız. Sıra ile bu biçimleri inceleyelim.

1-Styling Links

Bu başlıkta bir linkin çalışmasının aşama aşama nasıl şekillenmesi neler değişmesi gerektiğini inceleyeceğiz.

Kullanımı:

Css
a:link {
color: red;
}
/* ziyaret edilmiş link */
a:visited {
color: green;
}
/* mouse üzerine geldiğinde */
a:hover {
color: hotpink;
}
/* mouse ile seçildiğindeki link */
a:active {
color: blue;
}
Html
<p><b><a href="https://www.google.com.tr/" target="_blank">Google'a gider</a></b></p>

2-Text Decoration

Bu paragrafta linkin yazı şekli üzerine değişiklikler yapacağız. En çok kullanılan şekli ile altı çizili olup olmaması üzerinde duracağız çünkü web sitenizde en çok bunu kullanacaksınız.

Kullanımı:

Css
a:link {
text-decoration: none;
}
/* ziyaret edilmiş link */
a:visited {
text-decoration: none;
}
/* mouse üzerine geldiğinde */
a:hover {
text-decoration: underline;
}
/* mouse ile seçildiğindeki link */
a:active {
text-decoration: underline;
}
Html
<p><b><a href="https://www.google.com.tr/" target="_blank">Bu bir link</a></b></p>

3-Background Color

Bu örnekte de işi daha iyi kavramanız için belirleyici bir şekilde arkaplanı kullanarak bir örnek yapacağız.Bu örnek, bir sonraki başlıktaki butonlarımız için bir çağrışım mahiyetinde olacak.

Kullanımı:

Css
a:link {
background-color: yellow;
}
/* ziyaret edilmiş link */
a:visited {
background-color: cyan;
}
/* mouse üzerine geldiğinde */
a:hover {
background-color: #FF4949;
}
/* mouse ile seçildiğindeki link */
a:active {
background-color: hotpink;
}
Html
<p><b><a href="https://www.google.com.tr/" target="_blank">Bu bir link</a></b></p>

4-Link Buttons

Link deyince aklımıza yazıya atanmış şekilde düşünsek de aslında linkler buttonlar üzerinde çoğunlukla kullanılır. Özellikle aşağıdaki örnek benzeri durumları sürekli ama sürekli kullanacaksınız.

Kullanımı:

Css
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
Html
<a href="https://www.google.com.tr/" target="_blank">Bu bir button</a>


Paylaş:

Enes KILIÇ
Webmaster