<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Açılır Buton</title>
<style type="text/css" media="all">
/*Buton Clasımızı Oluşturduk */
.Buton{width:90px;height:34px;float:left;position:relative;margin:40px 0px 0px 40px;padding:17px 0px 0px 60px;background:url(http://a1208.hizliresim.com/10/x/cdgz3.png) no-repeat;font-family:Verdana, Geneva, sans-serif;font-size:16px;color:#FFF;}
/*Butonumuza Link Verince Altı Çizili Olmaması Ve Renginin Değişmemesi İçin Clasımızı Oluşturduk */
.Buton a{text-decoration:none;font-family:Verdana, Geneva, sans-serif;font-size:16px;color:#FFF;}
/*2.Buton Yani Açılacak Olan Buton Clasımızı Oluşturduk */
.Buton2{width:110px;height:46px;position:absolute;left:20px;top:51px;display:none;background:url(http://a1208.hizliresim.com/10/x/cdgzl.png) no-repeat;font-family:Verdana, Geneva, sans-serif;font-size:13px;color:#FFF;text-align:center;margin:0px 0px 0px 0px;padding:55px 0px 0px 0px;}
/*1.Buton'Un Üstüne Gelince Ne Yapması Gerektiğini Clasımıza Yazdık */
.Buton:hover > div.Buton2{width:110px;height:46px;position:absolute;left:20px;top:51px;display:block;background:url(http://a1208.hizliresim.com/10/x/cdgzl.png) no-repeat;font-family:Verdana, Geneva, sans-serif;font-size:13px;color:#FFF;text-align:center;margin:0px 0px 0px 0px;padding:55px 0px 0px 0px;}
</style>
</head>
<body>
<div class="Buton"><!-- Ana Buton-->
<a href="#">SENİ</a>
<!--Açılan Buton--><div class="Buton2">SEVİYORUM:D</div><!--Açılan Buton Biter-->
</div><!-- Ana Buton Biter-->
</body>
</html>
/*Buton Clasımızı Oluşturduk */
.Buton{width:90px;height:34px;float:left;position:relative;margin:40px 0px 0px 40px;padding:17px 0px 0px 60px;background:url(http://a1208.hizliresim.com/10/x/cdgz3.png) no-repeat;font-family:Verdana, Geneva, sans-serif;font-size:16px;color:#FFF;}
/*Butonumuza Link Verince Altı Çizili Olmaması Ve Renginin Değişmemesi İçin Clasımızı Oluşturduk */
.Buton a{text-decoration:none;font-family:Verdana, Geneva, sans-serif;font-size:16px;color:#FFF;}
/*2.Buton Yani Açılacak Olan Buton Clasımızı Oluşturduk */
.Buton2{width:110px;height:46px;position:absolute;left:20px;top:51px;display:none;background:url(http://a1208.hizliresim.com/10/x/cdgzl.png) no-repeat;font-family:Verdana, Geneva, sans-serif;font-size:13px;color:#FFF;text-align:center;margin:0px 0px 0px 0px;padding:55px 0px 0px 0px;}
/*1.Buton'Un Üstüne Gelince Ne Yapması Gerektiğini Clasımıza Yazdık */
.Buton:hover > div.Buton2{width:110px;height:46px;position:absolute;left:20px;top:51px;display:block;background:url(http://a1208.hizliresim.com/10/x/cdgzl.png) no-repeat;font-family:Verdana, Geneva, sans-serif;font-size:13px;color:#FFF;text-align:center;margin:0px 0px 0px 0px;padding:55px 0px 0px 0px;}