{"id":7243,"date":"2018-03-27T14:59:08","date_gmt":"2018-03-27T14:59:08","guid":{"rendered":"https:\/\/www.templatemonster.com\/tr\/blog\/?p=7243"},"modified":"2018-06-27T14:59:35","modified_gmt":"2018-06-27T14:59:35","slug":"css-ve-jquery-ile-basa-don-butonu-olusturma","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/","title":{"rendered":"CSS ve jQuery ile Ba\u015fa D\u00f6n Butonu Olu\u015fturma"},"content":{"rendered":"

Ba\u015fa D\u00f6n Butonu, \u00e7o\u011funuzun muhtemelen bir\u00e7ok web sitesinde g\u00f6rd\u00fc\u011f\u00fc bir \u015feydir. Kayd\u0131rma ba\u015flad\u0131\u011f\u0131n\u0131zda, bir web sayfas\u0131n\u0131n sa\u011f alt k\u00f6\u015fesinde g\u00f6r\u00fcnen ok i\u015fareti. T\u0131kland\u0131\u011f\u0131nda, sayfan\u0131n ba\u015f\u0131na geri d\u00f6nersiniz.<\/p>\n

Hala bir web sitesi tasarlakren <\/a>veya kendi ba\u015f\u0131n\u0131za bir web sitesi nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 merak ederken ba\u015fa d\u00f6n butonu eklemek istiyorsan\u0131z, aram\u0131za ho\u015f geldiniz!<\/p>\n

Ba\u015fa D\u00f6n\u00fc\u015f<\/h3>\n

Kodumuz CSS stili ve jQuery beti\u011fi, iki b\u00f6l\u00fcm\u00fcnden olu\u015facakt\u0131r. CSS ile ba\u015flayal\u0131m.<\/p>\n

Buton CSS Stilleri<\/h3>\n

D\u00fc\u011fmemiz i\u00e7in stil ve i\u015fareteleri olu\u015fturmakla ba\u015flayaca\u011fiz. \u0130\u015fte HTML k\u0131sm\u0131:<\/p>\n

<link rel=<\/span>\"stylesheet\"<\/span> href=<\/span>\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.5.0\/css\/font-awesome.min.css\"<\/span>><\/span>\r\n\r\n<a id=\"button\"<\/span>><\/a><\/span><\/pre>\n
D\u00fc\u011fme, bir id butonuna sahip tek bir ba\u011flant\u0131 etiketinden olu\u015facakt\u0131r. D\u00fc\u011fme i\u00e7in bir simge kullanabilmemiz i\u00e7in FontAwesome k\u00fct\u00fcphanesine de bir link ekliyoruz.<\/p>\n
Butonun ba\u015flang\u0131\u00e7 stili \u015f\u00f6yle g\u00f6r\u00fcn\u00fcr:<\/p>\n
#button {\r\n  display<\/span>: <\/span>inline-block<\/span>;\r\n  <\/span>background-color<\/span>: <\/span>#FF9800<\/span>;\r\n  <\/span>width<\/span>: <\/span>50<\/span>px<\/span><\/span>;\r\n  <\/span>height<\/span>: <\/span>50<\/span>px<\/span>;\r\n  <\/span>text-align<\/span>: <\/span>center<\/span>;\r\n  <\/span>border-radius<\/span>: <\/span>4<\/span>px<\/span>;\r\n  <\/span>margin<\/span>: <\/span>30<\/span>px<\/span>;\r\n  <\/span>position<\/span>: <\/span>fixed<\/span>;\r\n  <\/span>bottom<\/span>: <\/span>30<\/span>px<\/span>;\r\n  <\/span>right<\/span>: <\/span>30<\/span>px<\/span>;\r\n  transition: background-color <\/span>.3<\/span>s<\/span>;\r\n  <\/span>z-index<\/span>: <\/span>1000<\/span>;1<\/span><\/span>\r\n}\r\n#button:hover {\r\n  cursor: pointer;\r\n  background-color: #333;\r\n}\r\n#button:active {\r\n  background-color: #555;\r\n}<\/pre>\n
D\u00fc\u011fme bir ba\u011flant\u0131 eleman\u0131 oldu\u011fu i\u00e7in ekran \u00f6zelli\u011fini sat\u0131r i\u00e7i blo\u011fa d\u00f6n\u00fc\u015ft\u00fcrmemiz gerekiyor. 4px yuvarlak k\u00f6\u015feli 50 * 50 piksel kare bir d\u00fc\u011fme yapal\u0131m. Her bir tarafta parlak turuncu renk ve 30 piksellik bir kenarl\u0131k ekleriz. Sabit konum, sayfay\u0131 kayd\u0131r\u0131rken d\u00fc\u011fmemiz her zaman ayn\u0131 noktada kalmas\u0131n\u0131 sa\u011flar.\u00c7ok y\u00fcksek say\u0131s\u0131n\u0131n z-endeksi ise, web sitesi \u00f6\u011felerinin \u00fcst \u00fcste gelmesini sa\u011flar.<\/p>\n
\u0130mleci d\u00fc\u011fmenin \u00fczerine getirdi\u011fimizde imle\u00e7 bir i\u015faretleyicine d\u00f6n\u00fc\u015f\u00fcr ve arka plan rengi koyu gri rengine de\u011fi\u015fir. Ge\u00e7i\u015fleri sorunsuz hale getirmek i\u00e7in 0.3 saniye ge\u00e7i\u015fleri atar\u0131z. Ayr\u0131ca, d\u00fc\u011fmeyi t\u0131klad\u0131\u011f\u0131m\u0131zda arka plan rengi de de\u011fi\u015fir.<\/p>\n
Simge ekleme<\/h3>\n
\u015eimdi d\u00fc\u011fmemiz bo\u015f, bu y\u00fczden ona bir simge ekleyelim. Bunun gibi bir s\u00f6zde elemandan sonra bir :: ekleyerek yapar\u0131z:<\/p>\n
#button::after {\r\n  content: \"\\f077\";\r\n  font-family: FontAwesome;\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  font-size: 2em;\r\n  line-height: 50px;\r\n  color: #fff;\r\n}<\/pre>\n
FonAwesome<\/a> en pop\u00fcler font k\u00fct\u00fcphanesinden bir simge se\u00e7ece\u011fiz. Chevron Up<\/a> simgesi se\u00e7meye karar verdik. Bir s\u00f6zde \u00f6\u011fede g\u00f6r\u00fcnt\u00fclemek i\u00e7in font-ailesini FontAwesome olarak ayarlay\u0131n ve simgenizin Unicode de\u011ferinin i\u00e7erik \u00f6zelli\u011fine atay\u0131n. Ayr\u0131ca, sat\u0131r y\u00fcksekli\u011finizin simge y\u00fcksekli\u011fine e\u015fit olmas\u0131 gerekti\u011fini unutmay\u0131n.<\/p>\n
JQuery ile \u0130\u015flev Ekleme<\/p>\n
Bu alt b\u00f6l\u00fcmde d\u00fc\u011fmenin nas\u0131l \u00e7al\u0131\u015faca\u011f\u0131n\u0131 g\u00f6sterece\u011fiz. Bunu yapman\u0131n en kolay yolu, jQuery JavaScript kitapl\u0131\u011f\u0131 kullanmakt\u0131r. \u0130lk olarak, kodumuzun HTML bi\u00e7imlendirmesine jQuery eklemeliyiz. Kapan\u0131\u015f g\u00f6vde etiketinden hemen \u00f6nce bu kod sat\u0131r\u0131n\u0131 ekleyin.<\/p>\n
<script src=\u201dhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.1.1\/jquery.min.js\u201d><\/script><\/span><\/pre>\n
\u015eimdi jQuery s\u00f6zdizimini kullanarak scriptimizi yazabiliriz. Jquery sat\u0131r\u0131ndan sonra a\u015fa\u011f\u0131daki komut dosyas\u0131n\u0131 ekleyin:<\/p>\n
<Script><\/p>\n
 jQuery(document<\/b><\/span>).ready(function<\/b><\/span>() {\r\n  \r\n   var<\/b><\/span> btn =<\/span> $<\/span>('#button'<\/span>);\r\n\r\n   $<\/span>(window<\/b><\/span>).scroll<\/b><\/span>(function<\/b><\/span>() {\r\n     if<\/b><\/span> ($<\/span>(window<\/b><\/span>).scrollTop() ><\/span> 300<\/span>) {\r\n       btn.addClass('show'<\/span>);\r\n     } else<\/b><\/span> {\r\n       btn.removeClass('show'<\/span>);\r\n     }\r\n   });\r\n\r\n   btn.on('click'<\/span>, function<\/b><\/span>(e) {\r\n     e.preventDefault();\r\n     $<\/span>('html, body'<\/span>).animate({scrollTop:0<\/span>}, '300'<\/span>);\r\n   });\r\n\r\n });\r\n\r\n <\/script<\/b>>\r\n Bu beti\u011fi daha yak\u0131ndan inceleyelim. \r\n \u0130lk ba\u015fta a\u015fa\u011f\u0131daki kod sat\u0131r\u0131n\u0131 g\u00f6receksiniz : \r\n jQuery(document<\/b><\/span>).ready(function<\/b><\/span>() {<\/pre>\n
Bu beti\u011fi daha yak\u0131ndan inceleyelim.<\/p>\n
\u0130lk ba\u015fta a\u015fa\u011f\u0131daki kod sat\u0131r\u0131n\u0131 g\u00f6receksiniz:<\/p>\n
jQuery(document).ready(function() {<\/pre>\n
Bu i\u015flev i\u00e7indeki kodu sadece belge tam olarak y\u00fcklendi\u011finde \u00e7al\u0131\u015ft\u0131r\u0131n. Bu, JavaScript kodunuzun bir web sayfas\u0131n\u0131n taray\u0131c\u0131da tam olarak y\u00fcklenmemi\u015f b\u00f6l\u00fcmlerinde de\u011fi\u015fiklik yapmak istemesi durumunda hatalar\u0131 \u00f6nlemenin harika bir yoludur. Belge tamamen y\u00fcklendikten sonra \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131z kod, iki ana kod par\u00e7as\u0131ndan olu\u015fur. Komut dosyas\u0131n\u0131n ilk k\u0131sm\u0131, sayfan\u0131n ilerlemesi belirli bir noktaya ula\u015ft\u0131ktan sonra d\u00fc\u011fmemizi g\u00f6r\u00fcn\u00fcr hale getirir ve kaybolur. \u0130kinci k\u0131sm\u0131, d\u00fc\u011fmeyi t\u0131klad\u0131ktan sonra sayfay\u0131 yukar\u0131 kayd\u0131r\u0131r. Her birini ayr\u0131nt\u0131l\u0131 olarak inceleyelim.<\/p>\n
Butonun g\u00f6r\u00fcnmesi ve kaybolmas\u0131<\/h3>\n
\u0130\u015fi g\u00f6ren kodu :<\/p>\n
  var<\/b><\/span> btn =<\/span> $<\/span>('#button'<\/span>);\r\n\r\n   $<\/span>(window<\/b><\/span>).scroll<\/b><\/span>(function<\/b><\/span>() {\r\n     if<\/b><\/span> ($<\/span>(window<\/b><\/span>).scrollTop() ><\/span> 300<\/span>) {\r\n       btn.addClass('show'<\/span>);\r\n     } else<\/b><\/span> {\r\n       btn.removeClass('show'<\/span>);\r\n     }\r\n   }); <\/span><\/pre>\n
\u00d6ncelikle de\u011fi\u015fken btn bildiririz ve bir ID butonuna sahip bir \u00f6\u011feye y\u00f6nlendiririz. Bu, JavaScript'in hesaplama yapmay\u0131 daha h\u0131zl\u0131 hale getirmesine yard\u0131mc\u0131 olur. \u00d6\u011feyi bir de\u011fi\u015fkende saklad\u0131\u011f\u0131m\u0131z zaman ve JavaScript'in kodumuzda tekrar kullanmam\u0131z gerekti\u011finde, onu t\u00fcm sayfan\u0131n \u00fczerinden arama yapmas\u0131 gerekmez.<\/p>\n
.scroll()<\/p>\n
jQuery kullan\u0131\u015fl\u0131 bir i\u015fleve sahiptir. scroll(). Ne i\u015fe yarar? Web sayfan\u0131zdaki bir scroll olay\u0131 ger\u00e7ekle\u015fti\u011fi her defas\u0131nda y\u00fcr\u00fct\u00fclecek bir kod par\u00e7as\u0131n\u0131 ba\u011flar. Ayarlanm\u0131\u015f kayd\u0131r\u0131ma \u00f6zelli\u011fe sahip olan \u00e7er\u00e7eveler ve \u00f6\u011feler gibi herhangi bir kayd\u0131rabilir \u00f6\u011feye uygulayabilirsiniz. Genellikle bunu pencere \u00f6\u011fesine uygular\u0131z, \u00e7\u00fcnk\u00fc \u00f6rne\u011fimiz dahil olmak \u00fczere \u00e7o\u011fu durumda kayd\u0131rma i\u015flemi ger\u00e7ekle\u015fir.<\/p>\n
 $<\/span>(window<\/b><\/span>).scroll<\/b><\/span>(function<\/b><\/span>() {<\/pre>\n
Fonksiyonun i\u00e7inde if \/ else ifadesini ekleriz::<\/p>\n
     if<\/b><\/span> ($<\/span>(window<\/b><\/span>).scrollTop() ><\/span> 300<\/span>) {\r\n       btn.addClass('show'<\/span>);\r\n     } else<\/b><\/span> {\r\n       btn.removeClass('show'<\/span>);\r\n     }<\/pre>\n
Burada yapt\u0131\u011f\u0131m\u0131z \u015fey, kayd\u0131rma \u00e7ubu\u011funun dikey konumu kontrol etmek ve belirli bir noktadan d\u00fc\u011fmemizin g\u00f6r\u00fcnmesini sa\u011flamakt\u0131r. Kaydr\u0131ma \u00e7ubu\u011funun ge\u00e7erli konumunu elde etmek i\u00e7in yerle\u015fik bir jQuery y\u00f6ntemi .scrollTop ()<\/a> kullanaca\u011fiz. Her kayd\u0131rma yapt\u0131\u011f\u0131m\u0131zda, ka\u00e7 pilselin gizlendi\u011fi kontrol eder ve bunlar\u0131 bir say\u0131yla kar\u015f\u0131la\u015ft\u0131r\u0131r. Bizim \u00f6rne\u011fimizde bu say\u0131y\u0131 300 olarak ayarlad\u0131m, ama istedi\u011finiz say\u0131ya de\u011fi\u015ftirebilirsiniz. Say\u0131 300'den fazla olursa, d\u00fc\u011fme \u00f6\u011femize bir s\u0131n\u0131f g\u00f6sterisi ekleriz. Say\u0131 300'den daha d\u00fc\u015f\u00fck olursa ise, o s\u0131n\u0131f\u0131 kald\u0131r\u0131r\u0131z. S\u0131n\u0131f ekleme ve \u00e7\u0131karma imkan\u0131, jQuery'nin bu kadar pop\u00fcler olmas\u0131n\u0131n bir ba\u015fka nedenidir. Bunu addClass () ve removeClass () iki basit y\u00f6ntemle yapabilirsiniz. Ancak hen\u00fcz CSS\u2019de s\u0131n\u0131f g\u00f6sterisi yok, o y\u00fczden onu ekleyelim:<\/p>\n
 if ($(window).scrollTop() > 300) {\r\n      btn.addClass('show');\r\n    } else {\r\n      btn.removeClass('show');\r\n    }<\/pre>\n
D\u00fc\u011fmemiz varsay\u0131lan olarak gizlenir, bu y\u00fczden #buttonelement'e birka\u00e7 tane daha kural eklememiz gerekecek:<\/p>\n
  #buton { \r\n  ge\u00e7i\u015f: arka plan rengi .3s, \r\n  opakl\u0131k .5s, g\u00f6r\u00fcn\u00fcrl\u00fck .5s; \r\n  opakl\u0131k: 0; \r\n  g\u00f6r\u00fcn\u00fcrl\u00fck: gizli; \r\n  } 1<\/pre>\n
Ge\u00e7i\u015fi p\u00fcr\u00fczs\u00fcz hale getirebilmesi i\u00e7in ge\u00e7i\u015f niteli\u011fine ve saydaml\u0131\u011fa 0.5 saniyeye ayarlanm\u0131\u015f iki yeni de\u011fer ekledik.<\/p>\n
Sayfas\u0131n\u0131n \u00fcst\u00fcne gidin<\/h3>\n
Komut dosyas\u0131n\u0131n ikinci k\u0131sm\u0131, d\u00fc\u011fmeyi t\u0131klad\u0131ktan sonra sayfan\u0131n en \u00fcst\u00fcne gitmenizi sa\u011flar.<\/p>\n
  btn.on('click', function(e) { \r\n  e.preventDefault(); \r\n  $('html, body').animate({scrollTop:0}, '300'); \r\n    });1<\/pre>\n
on () Burada g\u00f6rd\u00fc\u011f\u00fcm\u00fcz ilk jQuery y\u00f6ntemi. \u0130lk parametrisi, taray\u0131c\u0131m\u0131zda bir fare t\u0131klamas\u0131 yapt\u0131\u011f\u0131m\u0131zda her zaman ger\u00e7ekle\u015fen JavaScript \"t\u0131klama\" olay\u0131d\u0131r. \u0130kinci parametre bir i\u015fleyici i\u015flevidir. Bunu istedi\u011fimiz \u015fekilde isimlendirebiliriz, ancak genelikle e veya olay ismi tercih edilir. Fonksiyonuna artarmak ve preventDefault () y\u00f6ntemi kullanmak i\u00e7in olay parametresine ihtiyac\u0131m\u0131z var. E.preventDefault () y\u00f6ntemi, olay\u0131n ger\u00e7ekle\u015fmesini engeller. \u00d6rne\u011fin, bir ba\u011flanto bizi bir sonraki sayfaya g\u00f6t\u00fcrmez. Bizim durumumuzda, ba\u011flant\u0131 eleman\u0131m\u0131z href \u00f6zelli\u011fi i\u00e7ermemesi ve bizi yeni bir sayfaya getirmemesi nedeniyle, bu \u00e7ok \u00f6nemli de\u011fil, ancak iki kez kontrol etmek daha iyidir.<\/p>\n
.animate()<\/a><\/em><\/strong><\/p>\n
JQuery .animate () y\u00f6ntemi, i\u015fini g\u00f6ren bir y\u00f6ntemidir. $('html, body').animate({scrollTop:0}, '300');<\/p>\n
animate () y\u00f6nteminin ilk parametresi, canland\u0131rmam\u0131z gereken \u00f6zellikleri listesidir. \u00d6zelli\u011fimiz scrollTop olarak adland\u0131r\u0131l\u0131r. 0 de\u011ferine sahip olmas\u0131n\u0131 isteriz. Bu parametrenin tipi d\u00fcz nesnedir ve bu y\u00fczden k\u00fcme parantezlerinizi kullanmam\u0131z anahtar \/ de\u011fer \u00e7ift s\u00f6zdizimi kullanarak de\u011ferlerimizi yazmam\u0131z gerekir. \u0130kinci parametre, animasyonun \u00e7al\u0131\u015fma h\u0131z\u0131d\u0131r. Milisaniye cinsinden \u00f6l\u00e7\u00fcl\u00fcr. Say\u0131 ne kadar y\u00fcksek olursa animasyonu o kadar daha yava\u015f \u00e7al\u0131\u015f\u0131r. Varsay\u0131lan say\u0131 400'dur, ancak  300 <\/em> 'e de\u011fi\u015ftirdim. En son, canland\u0131rma y\u00f6ntemini, web sayfam\u0131zdaki HTML ve g\u00f6vde elemanlar\u0131na uygular\u0131z. \u015eimdi d\u00fc\u011fmeye her bast\u0131\u011f\u0131m\u0131zda sayfan\u0131n \u00fcst k\u0131sm\u0131na ge\u00e7ece\u011fiz.<\/p>\n
Demo<\/h3>\n
CodePen demosu<\/a>nda sonu\u00e7lar\u0131 g\u00f6rebilirsiniz. Ayr\u0131ca, g\u00f6sterici ama\u00e7l\u0131 olarak baz\u0131 \u00f6rnek metinleri ekledim.<\/p>\n
 CodePen<\/a>'de Maatthew Cain (@matthewcain) taraf\u0131ndan sunulan Ba\u015fa D\u00f6n Butonu<\/a>na bak\u0131n.<\/p>\n
Son d\u00fc\u015f\u00fcnceler<\/h3>\n
Ba\u015fa d\u00f6n d\u00fc\u011fmeler, bir web sayfas\u0131n\u0131n kullan\u0131labilirli\u011fi a\u00e7\u0131s\u0131ndan harika bir \u00f6\u011fesidir. Umar\u0131m bu rehber, CSS ve JavaScript bilginizi geni\u015fletmenize yard\u0131mc\u0131 olduk.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ba\u015fa D\u00f6n Butonu, \u00e7o\u011funuzun muhtemelen bir\u00e7ok web sitesinde g\u00f6rd\u00fc\u011f\u00fc bir \u015feydir. Kayd\u0131rma ba\u015flad\u0131\u011f\u0131n\u0131zda, bir web sayfas\u0131n\u0131n sa\u011f alt k\u00f6\u015fesinde g\u00f6r\u00fcnen ok i\u015fareti. T\u0131kland\u0131\u011f\u0131nda, sayfan\u0131n ba\u015f\u0131na geri d\u00f6nersiniz. Hala bir web sitesi tasarlakren veya kendi ba\u015f\u0131n\u0131za bir web sitesi nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 merak ederken ba\u015fa d\u00f6n butonu eklemek istiyorsan\u0131z, aram\u0131za ho\u015f geldiniz! Ba\u015fa D\u00f6n\u00fc\u015f Kodumuz CSS stili […]<\/p>\n","protected":false},"author":2098134,"featured_media":7244,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[114,15],"tags":[339,449,105,478],"yoast_head":"\nCSS ve jQuery ile Ba\u015fa D\u00f6n Butonu Olu\u015fturma \u2b50 Blog TemplateMonster T\u00fcrkiye<\/title>\n<meta name=\"description\" content=\"Ba\u015fa D\u00f6n Butonu, \u00e7o\u011funuzun muhtemelen bir\u00e7ok web sitesinde g\u00f6rd\u00fc\u011f\u00fc bir \u015feydir. Kayd\u0131rma ba\u015flad\u0131\u011f\u0131n\u0131zda, bir web sayfas\u0131n\u0131n sa\u011f alt k\u00f6\u015fesinde g\u00f6r\u00fcnen ok\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS ve jQuery ile Ba\u015fa D\u00f6n Butonu Olu\u015fturma \u2b50 Blog TemplateMonster T\u00fcrkiye\" \/>\n<meta property=\"og:description\" content=\"Ba\u015fa D\u00f6n Butonu, \u00e7o\u011funuzun muhtemelen bir\u00e7ok web sitesinde g\u00f6rd\u00fc\u011f\u00fc bir \u015feydir. Kayd\u0131rma ba\u015flad\u0131\u011f\u0131n\u0131zda, bir web sayfas\u0131n\u0131n sa\u011f alt k\u00f6\u015fesinde g\u00f6r\u00fcnen ok\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog TemplateMonster T\u00fcrkiye\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonsterTurkey\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-27T14:59:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-06-27T14:59:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2018\/06\/featured_image-2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Oksana Semenchuk\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@templatemonster\" \/>\n<meta name=\"twitter:site\" content=\"@templatemonster\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Oksana Semenchuk\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/\"},\"author\":{\"name\":\"Oksana Semenchuk\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/4ee5ac8d9dc1908f1b828ad85c50ba5b\"},\"headline\":\"CSS ve jQuery ile Ba\u015fa D\u00f6n Butonu Olu\u015fturma\",\"datePublished\":\"2018-03-27T14:59:08+00:00\",\"dateModified\":\"2018-06-27T14:59:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/\"},\"wordCount\":1301,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/#organization\"},\"keywords\":[\"CSS3\",\"HTML5\",\"Jquery\",\"Web Geli\u015ftirme\"],\"articleSection\":[\"\u00d6\u011freticiler\",\"Web Geli\u015ftirme\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/\",\"url\":\"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/\",\"name\":\"CSS ve jQuery ile Ba\u015fa D\u00f6n Butonu Olu\u015fturma \u2b50 Blog TemplateMonster T\u00fcrkiye\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/#website\"},\"datePublished\":\"2018-03-27T14:59:08+00:00\",\"dateModified\":\"2018-06-27T14:59:35+00:00\",\"description\":\"Ba\u015fa D\u00f6n Butonu, \u00e7o\u011funuzun muhtemelen bir\u00e7ok web sitesinde g\u00f6rd\u00fc\u011f\u00fc bir \u015feydir. Kayd\u0131rma ba\u015flad\u0131\u011f\u0131n\u0131zda, bir web sayfas\u0131n\u0131n sa\u011f alt k\u00f6\u015fesinde g\u00f6r\u00fcnen ok\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/tr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS ve jQuery ile Ba\u015fa D\u00f6n Butonu Olu\u015fturma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#website\",\"url\":\"https:\/\/monsterspost.com\/tr\/\",\"name\":\"Blog TemplateMonster T\u00fcrkiye\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/tr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#organization\",\"name\":\"MonsterPost T\u00fcrkiye\",\"url\":\"https:\/\/monsterspost.com\/tr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost T\u00fcrkiye\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonsterTurkey\/\",\"https:\/\/twitter.com\/templatemonster\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/4ee5ac8d9dc1908f1b828ad85c50ba5b\",\"name\":\"Oksana Semenchuk\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6d60be0d359ab2c1c3f826c9f9c7d752?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6d60be0d359ab2c1c3f826c9f9c7d752?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Oksana Semenchuk\"},\"description\":\"Web tasar\u0131m\u0131 ile ilgili herhangi bir konuda ilham kayna\u011f\u0131 ar\u0131yorsan\u0131z, Oksana'n\u0131n makalelerinin koleksiyonu inceleyin. Sizin i\u00e7in kullan\u0131\u015fl\u0131 olmal\u0131d\u0131r. Onu LinkedIn'de takip edin.\",\"url\":\"https:\/\/monsterspost.com\/tr\/author\/oksanasemenchuk\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS ve jQuery ile Ba\u015fa D\u00f6n Butonu Olu\u015fturma \u2b50 Blog TemplateMonster T\u00fcrkiye","description":"Ba\u015fa D\u00f6n Butonu, \u00e7o\u011funuzun muhtemelen bir\u00e7ok web sitesinde g\u00f6rd\u00fc\u011f\u00fc bir \u015feydir. Kayd\u0131rma ba\u015flad\u0131\u011f\u0131n\u0131zda, bir web sayfas\u0131n\u0131n sa\u011f alt k\u00f6\u015fesinde g\u00f6r\u00fcnen ok","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS ve jQuery ile Ba\u015fa D\u00f6n Butonu Olu\u015fturma \u2b50 Blog TemplateMonster T\u00fcrkiye","og_description":"Ba\u015fa D\u00f6n Butonu, \u00e7o\u011funuzun muhtemelen bir\u00e7ok web sitesinde g\u00f6rd\u00fc\u011f\u00fc bir \u015feydir. Kayd\u0131rma ba\u015flad\u0131\u011f\u0131n\u0131zda, bir web sayfas\u0131n\u0131n sa\u011f alt k\u00f6\u015fesinde g\u00f6r\u00fcnen ok","og_url":"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/","og_site_name":"Blog TemplateMonster T\u00fcrkiye","article_publisher":"https:\/\/www.facebook.com\/TemplateMonsterTurkey\/","article_published_time":"2018-03-27T14:59:08+00:00","article_modified_time":"2018-06-27T14:59:35+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2018\/06\/featured_image-2.jpg","type":"image\/jpeg"}],"author":"Oksana Semenchuk","twitter_card":"summary_large_image","twitter_creator":"@templatemonster","twitter_site":"@templatemonster","twitter_misc":{"Yazan:":"Oksana Semenchuk","Tahmini okuma s\u00fcresi":"8 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/"},"author":{"name":"Oksana Semenchuk","@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/4ee5ac8d9dc1908f1b828ad85c50ba5b"},"headline":"CSS ve jQuery ile Ba\u015fa D\u00f6n Butonu Olu\u015fturma","datePublished":"2018-03-27T14:59:08+00:00","dateModified":"2018-06-27T14:59:35+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/"},"wordCount":1301,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/tr\/#organization"},"keywords":["CSS3","HTML5","Jquery","Web Geli\u015ftirme"],"articleSection":["\u00d6\u011freticiler","Web Geli\u015ftirme"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/","url":"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/","name":"CSS ve jQuery ile Ba\u015fa D\u00f6n Butonu Olu\u015fturma \u2b50 Blog TemplateMonster T\u00fcrkiye","isPartOf":{"@id":"https:\/\/monsterspost.com\/tr\/#website"},"datePublished":"2018-03-27T14:59:08+00:00","dateModified":"2018-06-27T14:59:35+00:00","description":"Ba\u015fa D\u00f6n Butonu, \u00e7o\u011funuzun muhtemelen bir\u00e7ok web sitesinde g\u00f6rd\u00fc\u011f\u00fc bir \u015feydir. Kayd\u0131rma ba\u015flad\u0131\u011f\u0131n\u0131zda, bir web sayfas\u0131n\u0131n sa\u011f alt k\u00f6\u015fesinde g\u00f6r\u00fcnen ok","breadcrumb":{"@id":"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/tr\/css-ve-jquery-ile-basa-don-butonu-olusturma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/tr\/"},{"@type":"ListItem","position":2,"name":"CSS ve jQuery ile Ba\u015fa D\u00f6n Butonu Olu\u015fturma"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/tr\/#website","url":"https:\/\/monsterspost.com\/tr\/","name":"Blog TemplateMonster T\u00fcrkiye","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/tr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/tr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/tr\/#organization","name":"MonsterPost T\u00fcrkiye","url":"https:\/\/monsterspost.com\/tr\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost T\u00fcrkiye"},"image":{"@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonsterTurkey\/","https:\/\/twitter.com\/templatemonster"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/4ee5ac8d9dc1908f1b828ad85c50ba5b","name":"Oksana Semenchuk","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d60be0d359ab2c1c3f826c9f9c7d752?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d60be0d359ab2c1c3f826c9f9c7d752?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Oksana Semenchuk"},"description":"Web tasar\u0131m\u0131 ile ilgili herhangi bir konuda ilham kayna\u011f\u0131 ar\u0131yorsan\u0131z, Oksana'n\u0131n makalelerinin koleksiyonu inceleyin. Sizin i\u00e7in kullan\u0131\u015fl\u0131 olmal\u0131d\u0131r. Onu LinkedIn'de takip edin.","url":"https:\/\/monsterspost.com\/tr\/author\/oksanasemenchuk\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/posts\/7243"}],"collection":[{"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/users\/2098134"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/comments?post=7243"}],"version-history":[{"count":4,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/posts\/7243\/revisions"}],"predecessor-version":[{"id":7248,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/posts\/7243\/revisions\/7248"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/media\/7244"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/media?parent=7243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/categories?post=7243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/tags?post=7243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}