Css ile büyüyen buton

Üzerine geldiğinde boyutu değişen buton yapalım.

Aşağıdaki logolar üzerine gelip değişimi gözlemleyebiliriz.

index.html

Önce html dosyası ile başlayalım.

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<link rel=“stylesheet” type=“text/css” href=“stil2.css”>
</head>
<body>

<div class=“kutu”> <a href=“https://www.facebook.com/”><img src=“resimler/face.png” class=“buton” ></a>
<a href=“https://twitter.com/“><img src=“resimler/twiter.png” class=“buton” ></a>
<a href=“https://www.youtube.com/”><img src=“resimler/youtube.png” class=“buton” ></a>

</div>
</body>

</html>

stil2.css

@charset “utf-8”;
.kutu{
width:200px;
height:120px;
background:#F96;
line-height:120px;
padding:20px;
}
.buton{
width:40px;
transition:0.3s; /*Gecikme zamanı*/
cursor:pointer; /*işaretçi simgesi gösterme*/
}
.buton:hover{
width:60px;
cursor:pointer;
}
Paylaş:

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir