Enis Baydemir : Buton Kodlari

Buton Kodlari

KODLAR

Kayan Yazılı Buton

Buton Kodları

Tıklayınca Açılan Buton

Sayfa içini Bölümlere Ayırma

İLGİLİ İÇERİK 1

1 2 3

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><style>
.post-pagination {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}
.button_1, .button_2, .button_3 {
    border: 2px solid #f4655f;
    font-weight: 900;
    padding: 6px 36px;
    color:#f4655f;
    transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
    background: none repeat scroll 0 0 #f4655f;
    color: #fff;
    text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
  jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
<div class="content_1">
İLGİLİ İÇERİK 1
</div>
<div class="content_2" style="display: none;">
İLGİLİ İÇERİK 2
</div>
<div class="content_3" style="display: none;">
İLGİLİ İÇERİK 3
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

Mouse'a Duyarlı Buton

Resim Efekti

Sallanan Buton

Yavaş sallanan
Hızlı sallanan

<script language="JavaScript">
pos = 15;
TO = null;
function shake_funct2(object,speed)
{
obj = eval(object)
txt = clear_space(obj.value);
if (pos == 15)
{
txt = txt + " ";
pos = -15;
}
else
{
txt = " " + txt;
pos = 15;
}
obj.value = txt;
obj.style.width = parseInt(obj.style.width) + pos;
obj = object
sp = speed
TO = setTimeout("shake_funct2(obj,sp)",speed);
}
function clear_space(text)
{
while (text.substring(0,1) == " ")
{
text = text.substring(1,text.length);
}
while(text.substring(text.length-1,text.length) == " ")
{
text = text.substring(0,text.length-1);
}
return text;
}
function end_shake_funct2(object)
{
clearTimeout(TO);
obj = eval(object);
txt = clear_space(obj.value);
obj.value = txt;
//alert(pos);
if (pos == -15)
{
obj.style.width = parseInt(obj.style.width) +15;
}
pos = 15
}
</script>

<form name=myform2>
<table border=0>
<tr><td>
Yavaş sallanan
</td>
<td align=center width=160>
<input type=button value = "WEBSEYYAHI" style="font-size:10;width:150" onmouseover="shake_funct2(this,100)" onmouseout="end_shake_funct2(this)">
</td></tr>
<tr><td>
Hızlı sallanan
</td>
<td align=center width=160>
<input type=button value = "WEBSEYYAHI" style="font-size:10;width:150" onmouseover="shake_funct2(this,50)" onmouseout="end_shake_funct2(this)">
</td></tr>
</table>

Resim Animasyonlu Buton

Butona Resim Eklemek Tkıla oku buton

Üzerine Gelince Dönen Resim

href="Yönlendirilecek URL" : Tıklandığında gidilmesini istenen site adresi.
src="Resim URL" : Resim adresi.
width="Genişlik değeri girin" height="Yükseklik değeri girin" : Resim boyutları px yada % olabilir.

<style type="text/css">
  p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */-moz-transition: all 0.8s ease-in-out;-webkit-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;-ms-transition: all 0.8s ease-in-out;transition: all 0.8s ease-in-out;}p#socialicons img:hover{-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}p#socialicons2 img:hover{-moz-transform: rotate(70deg);-webkit-transform: rotate(70deg);-o-transform: rotate(70deg);-ms-transform: rotate(70deg);transform: rotate(70deg);}p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */}p#socialicons3 img:hover{-moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;-moz-transform: rotate(-360deg);-webkit-transform: rotate(-360deg);-o-transform: rotate(-360deg);-ms-transform: rotate(-360deg);transform: rotate(-360deg);}
</style>
<center>
<p id="socialicons" style="text-align: left; ">
<a href="Yönlendirilecek URL">
<img border="0" src="http://www.sitekodlari.com/img/ari.png" width="Genişlik değeri girin" height="Yükseklik değeri girin" alt="" /></a> </p>
</center>

Renkli buton Buraya Yaz

<style>
/* Content */
.modal > div {
width: 500px;
background: #fff;
position: relative;
margin: 10% auto;

/* Style */
text-decoration: none;
text-shadow: none;
text-align: center;
font-weight: bold;
background: #000;
color: #fff;
border: 3px solid #fff;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Open modal */
a.openModal {
-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
    -webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
    box-shadow:inset 0px 1px 0px 0px #caefab;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
    background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
    
    background-color:#77d42a;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #268a16;
    display:inline-block;
    color:#306108;
    font-family:Verdana;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #aade7c;
}
a.openModal:hover,
a.openModal:focus {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
    background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
    
}
</style>
<a href="LINK BURAYA" class="openModal">Yazı Buraya</a>
<aside id="example" class="modal">
  
</aside>

İleri Geri Butonu

CSS Buton Kodu