Sadece CSS3 Kullanarak Slider Oluşturma

Merhaba arkadaşlar, CSS bilgimi gün geçtikçe geliştiriyorum. Bugün sizlere sadece CSS3 kullanarak nasıl slider oluştururuz onu anlatmaya çalışacağım. Artık jQuery ve JS'ye ihtiyaç duymadan CSS bilgimiz ile güzel bir slider yapalım :)

CSS

#images {
  width: 650px;
  height: 250px;
  position: relative;
  margin: 30px auto;
}
#images img {
  width: 650px;
  height: 250px;
  border:10px solid #CCC;
  position: absolute;
  top: 0;
  left: -400px;
  z-index: 1;
  opacity: 0;
  
  transition: all linear 500ms;
  -o-transition: all linear 500ms;
  -moz-transition: all linear 500ms;
  -webkit-transition: all linear 500ms;
}
#images img:target {
  left: 0;
  z-index: 9;
  opacity: 1;
}
#images img:first-child {
  left: 0;
  opacity: 1;
}
#slider a {
  text-decoration: none;
  background: #666;
  border: 1px solid #000;
  padding: 4px 8px;
  color: #FFF;
  border-radius:30px 30px 30px 30px
}
#slider a:hover {
  background: #FFF;
  color:#000;
  -webkit-transition: color 0.8s;
   -moz-transition: color 0.8s;
   -o-transition: color 0.8s;
   transition: color 0.8s;
}

HTML

<div id="images">
  <img id="image1" src="http://i.imgur.com/dL3io.jpg" />
  <img id="image2" src="http://i.imgur.com/qASVX.jpg" />
  <img id="image3" src="http://i.imgur.com/fLuHO.jpg" />
  <img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
  <a href="#image1">1</a>
  <a href="#image2">2</a>
  <a href="#image3">3</a>
  <a href="#image4">4</a>
</div>

Canlı Önizleme


Arkadaşlar biliyorum şu resim geçişleri kısmı hiç hoş değil ^^

Devamı »

CSS3 Sosyal Ağ Butonları

CSS3 kullanarak kodladığım bu güzel sosyal ağ butonları çok kullanışlı. İsterseniz yazılarınızı paylaşmak içinde kullanabilirsiniz.

CSS

ul{
 display: inline;
 line-height: 40px;
}
a.dribbble{
 position: absolute;
 width: 170px;
 height: 26px;
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #F98CB6),color-stop(0,#F75F94));
 -webkit-border-radius: 3px;
 border-top: 1px solid #fbbad3;
 -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
 font-family: "Arial";
 font-size: 13px;
 text-decoration: none;
 font-weight: 700;
 padding-bottom: 11px;
 padding-left: 10px;
 color: rgba(74,36,49,.9);
 text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.dribbble:active{
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #F75F94),color-stop(0,#F98CB6));
}

/*Twitter*/
a.twitter{
 position: absolute;
 width: 170px;
 height: 26px;
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #65acc8),color-stop(0,#4586ae));
 -webkit-border-radius: 3px;
 border-top: 1px solid #a1cdde;
 -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
 font-family: "Arial";
 font-size: 13px;
 text-decoration: none;
 font-weight: 700;
 padding-bottom: 11px;
 padding-left: 10px;
 color: rgba(25,45,55,.9);
 text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.twitter:active{
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #4586ae),color-stop(0,#65acc8));
}
/*Facebook*/
a.facebook{
 position: absolute;
 width: 170px;
 height: 26px;
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #4669ab),color-stop(0,#304886));
 -webkit-border-radius: 3px;
 border-top: 1px solid #8ea4cd;
 -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
 font-family: "Arial";
 font-size: 13px;
 text-decoration: none;
 font-weight: 700;
 padding-bottom: 11px;
 padding-left: 10px;
 color: rgba(21,31,53,1);
 text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.facebook:active{
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #304886),color-stop(0,#4669ab));
}
/*Forrst*/
a.forrst{
 position: absolute;
 width: 170px;
 height: 26px;
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #58853e),color-stop(0,#3c592a));
 -webkit-border-radius: 3px;
 border-top: 1px solid #99b489;
 -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
 font-family: "Arial";
 font-size: 13px;
 text-decoration: none;
 font-weight: 700;
 padding-bottom: 11px;
 padding-left: 10px;
 color: rgba(22,33,16,1);
 text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.forrst:active{
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #3c592a),color-stop(0,#58853e));
}
/*Designmoo*/
a.designmoo{
 position: absolute;
 width: 170px;
 height: 26px;
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #eb5a5f),color-stop(0,#e13c41));
 -webkit-border-radius: 3px;
 border-top: 1px solid #f39a9e;
 -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
 font-family: "Arial";
 font-size: 13px;
 text-decoration: none;
 font-weight: 700;
 padding-bottom: 11px;
 padding-left: 10px;
 color: rgba(69,22,24,1);
 text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.designmoo:active{
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #e13c41),color-stop(0,#eb5a5f));
}
/*Flickr*/
a.flickr{
 position: absolute;
 width: 170px;
 height: 26px;
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #ea66ac),color-stop(0,#da3868));
 -webkit-border-radius: 3px;
 border-top: 1px solid #f3a2cd;
 -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.3);
 font-family: "Arial";
 font-size: 13px;
 text-decoration: none;
 font-weight: 700;
 padding-bottom: 11px;
 padding-left: 10px;
 color: rgba(74,4,32,1);
 text-shadow: 0 1px 1px rgba(255,255,255,.35);
}
a.flickr:active{
 background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1, #da3868),color-stop(0,#ea66ac));
}
/*Using Sprites*/
.icons{
 position: absolute;
 display: block;
 background-image: url(http://u1308.hizliresim.com/1d/8/r8x9p.png);
 background-repeat: no-repeat;
 height: 26px;
 width: 25px;
 right: 10px;
 bottom: 5px;
}
.icons.dribbble{
 background-position: 0 0;
}

.icons.twitter{
 background-position: -25px 0;
}

.icons.facebook{
 background-position: -50px 0;
}

.icons.forrst{
 background-position: -75px 0;
}

.icons.designmoo{
 background-position: -100px 0;
}

.icons.flickr{
 background-position: -125px 0;
}

a:hover { 
   -webkit-transition: color 0.8s;
   -moz-transition: color 0.8s;
   -o-transition: color 0.8s;
   transition: color 0.8s;
   color:#FFFFFF}

HTML

<ul>
  <li><a href="#" class="dribbble">Dribbble<span class="icons dribbble"></span></a></li>
  <br/>
  <li><a href="#" class="twitter">Twitter<span class="icons twitter"></span></a></li>
  <br/>
  <li><a href="#" class="facebook">Facebook<span class="icons facebook"></span></a></li>
  <br />
  <li><a href="#" class="forrst">Forrst<span class="icons forrst"></span></a></li>
  <br />
  <li><a href="#" class="designmoo">Designmoo<span class="icons designmoo"></span></a></li>
  <br />
  <li><a href="#" class="flickr">Flickr<span class="icons flickr"></span></a></li>
    </ul>

Canlı önizleme

Devamı »

Blogger CSS3 Geçişli Arama Kutusu

CSSBeyin adlı blogumda şimdi paylaşacağım arama kutusuna benzer bir paylaşımda bulunmuştum. Ve bir takipçimiz "Blogger için entegre edebilir misin?" ricasında bulunmuştu. Sonunda vakit buldum entegreyi tamamladım. Fakat bir farkı var. Oradaki ile birebir değil.

Bir önceki yazım olan CSS3 Transitions kullanılarak oluşturulmuştur. Eğer CSS3 Transitions paylaşımlarımı iyi kavrarsanız sizde yapabilirisiniz.

CSS Kodları

#search input[type="text"]:hover {width:208px;border:1px solid #CCC;}
#search input[type="text"] {
background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRPusgRIixpXileM8jnv4XOOpkYAOjpvteSqq5vfPZDtCu0L4bFGxNS3ZMfmMneZDSZ66NlsX2dI6MG3cqwyjpd1pH3pn9ZrRgCk-wU6pZF29ePgONnNSHAAH_px-F0c0luY_mLMnYnh5q/s0/search_32x32-32.png")no-repeat center left;
font-size: 13px;
color: #222;
width: 0px;
padding: 10px 0px 11px 35px;
z-index: 9;
border: 1px solid #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
margin-bottom: -1px;
position: absolute;
top: 0px;
right:20px;}

HTML Kodları

<form action="http://blogismi.com/search/" id="search" method="get">
<input name="q" placeholder="Ne Aramıştınız ?" size="40" type="text"></form>

Devamı »

CSS3 Transitions Özelliği: Hareketlendirme ve Hover Ayarları

Daha önceleri şu yazımda sizlere CSS3 Transition kullanarak opaklık hoverlarını görsel olarak nasıl ayarlayabileceğimizi göstermiştim.

Bu yazımda ise yine CSS3 Transition kullanarak nesneye hareket katacağız.

Sağa Hareket Ettirme Özelliği

.element {
color:#333;
-moz-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s}

.element:hover {padding-left:20px}

Kodlarımız arasında bulunan
*padding-left kısmını padding-right olarak değiştirirsek elementimiz sola doğru hareket eder. (Ters mantık var)

Aşağı Hareket Ettirme Özelliği

.element {
color:#333;
-moz-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s}

.element:hover {padding-top:20px}

Kodlarımız arasında bulunan
*padding-top kısmını padding-bottom olarak değiştirirsek elementimiz yukarı doğru hareket eder.

Devamı »

CSS3 Tooltip Sosyal Medya Butonları

Her geçen gün CSS3'ün özelliklerini keşfettikçe kodlara daha çok hayran oluyorum. Mesela bugün bloguma Özgür'ün blogunda gördüğüm CSS3 Animated'ı uyguladım. (Bloga girişte soldan sağa doğru kayması.) Çokta hoşuma gitti. Eğer bir sıkıntı çıkarmaz ise bu şekilde devam edeceğim. Havalı girişler iyidir iyi :D

Konumuza dönelim bugün siz okurlarıma CSS3 Tooltip kullanılarak hazırlanmış sosyal medya butonlarını vereceğim. Eğer tooltip mantığını çözerseniz hemen her yerde kullanabilirsiniz.

HTML Kodları

<center>

  <ul style="margin: 0 auto" class="sosyal-buton" id="sosyal-cssanime">

     <li><a href="#" rel="nofollow" target="_blank" title="Facebook"><img src="http://4.bp.blogspot.com/-iL1yn4RuH78/T7Kd0GRPNeI/AAAAAAAAC_0/4edv38UA2-A/s1600/facebook.png">
    <strong>Facebook</strong></a> 
    </li>
     <li><a href="#" rel="nofollow" target="_blank" title="Twitter"><img src="http://3.bp.blogspot.com/-LgqftoheYqw/T7Kd3rmV6xI/AAAAAAAADAk/dBVNeD8mn7A/s1600/twitter.png">
    <strong>Twitter</strong></a> 
    </li>
    <li><a href="#" rel="nofollow" target="_blank" title="Google+"><img src="http://3.bp.blogspot.com/-4O2a3av0u48/T7jUo_Jvu5I/AAAAAAAADBs/O9Q-WNyBm34/s1600/googleplus.png">
    <strong>GooglePlus</strong></a> 
    </li>
 
    </ul>
</center>

CSS Kodları

/* Sosyal Butonlar */
    ul.sosyal-buton { list-style:none;margin 0auto;display:inline-block; }
    ul.sosyal-buton li { display:inline; float:left;  }
    ul.sosyal-buton li a {background-repeat:no-repeat; display:block; width:48px; height:48px; position:relative; text-decoration:none; }
   
 ul.sosyal-buton li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
 
    #sosyal-cssanime:hover li { opacity:0.2; }
    #sosyal-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
    #sosyal-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
    #sosyal-cssanime li:hover { opacity:1; }
    #sosyal-cssanime li:hover a strong { opacity:1; top:-10px; }
    /* Sosyal Butonlar */

Butonlarımızın canlı önizlemesi için bu adresi kullanın.

Devamı »

CSS Filtreler İle Resimlerinize Efekt Verin

CSS'nin gelişimi ile hiç bir program ya da editöre ihtiyaç duymadan sadece CSS'den yararlanarak resimlerimize efektler kazandırabiliyoruz. Bu imkanı CSS3 Filtreler ile uygulayacağız.

Filtreleri Kullanmak

filter: filtreadi(deger);

Şuanda en düzgün sonuç veren tarayıcılar webkit motorunu kullanan tarayıcılardır, daha doğrusu filtreler bir tek webkit motorunu kullanan tarayıcılarda çalışıyor. İlerleyen zamanlarda tarayıcılar bu olaya destek verecektir, işte diğer tarayıcıların ön ekleri ve kullanımları;

-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

Bulanıklık Vermek İçin: Blur

img {
   -webkit-filter: blur(2px);
   -moz-filter: blur(2px);
   -ms-filter: blur(2px);
   -o-filter: blur(2px);
    filter: blur(2px);
}

img:hover {
 filter: blur(0); 
-webkit-filter: blur(0); 
-moz-filter: blur(0); 
-o-filter: blur(0); 
-ms-filter: blur(0); 
}

Gri Tonlama Vermek İçin: Grayscale

img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

img:hover {
filter: grayscale(0); 
-webkit-filter: grayscale(0); 
-moz-filter: grayscale(0); 
-o-filter: grayscale(0); 
-ms-filter: grayscale(0); 
}

Parlaklık Vermek İçin: Birghtness

img {
     -webkit-filter: brightness(0.5);
     -moz-filter: brightness(0.5);
     -o-filter: brightness(0.5);
     -ms-filter: brightness(0.5);
      filter: brightness(0.5);
}

img:hover {
     -webkit-filter: brightness(0.9);
     -moz-filter: brightness(0.9);
     -o-filter: brightness(0.9);
     -ms-filter: brightness(0.9);
      filter: brightness(0.9);
}

Doygunluk Vermek İçin: Saturate

img{
    filter: saturate(50%);
    -webkit-filter: saturate(50%);
    -moz-filter: saturate(50%);
    -o-filter: saturate(50%);
    -ms-filter: saturate(50%);
}

img:hover {
    filter: saturate(80%);
    -webkit-filter: saturate(80%);
    -moz-filter: saturate(80%);
    -o-filter: saturate(80%);
    -ms-filter: saturate(80%);
}

Nostalji Vermek İçin: Sepya

img { filter: sepia(100%);
  -webkit-filter: sepia(100%);
  -moz-filter: sepia(100%);
  -o-filter: sepia(100%);
  -ms-filter: sepia(100%);
}

img:hover { filter: sepia(10%);
  -webkit-filter: sepia(10%);
  -moz-filter: sepia(10%);
  -o-filter: sepia(10%);
  -ms-filter: sepia(10%);
}

Gölge Vermek İçin: Drop Shadow

img {
-webkit-filter: drop-shadow(9px 9px 20px black);
-moz-filter: drop-shadow(9px 9px 20px black);
-o-filter: drop-shadow(9px 9px 20px black);
  -ms-filter: drop-shadow(9px 9px 20px black);}

img:hover{
  -webkit-filter: drop-shadow(9px 9px 20px blue);
-moz-filter: drop-shadow(9px 9px 20px blue);
-o-filter: drop-shadow(9px 9px 20px blue);
-ms-filter: drop-shadow(9px 9px 20px blue);
}

Vermiş olduğum örnekler CSS Filtreler'den sadece birkaçı internette daha fazlasını bulabilir ve rahatlıkla kullanabilirsiniz.

Efektlerin Canlı Önizlemesi

Devamı »

CSS3 ile Oluşturulmuş Google Tarzı Arama Kutusu

Selamlar, sabah yer imlerindeki bloglara bakarken bu arama kutusunu gördüm.Kodları iyice analiz ettikten sonra sizinle paylaşmaya karar verdim.Hemen anlatıma geçiyorum.




HTML'yi Düzenle > CTRL + F ile aşağıdaki kodumuzu buluyoruz.

]]></b:skin>

Yukarıdaki kodun hemen üzerine aşağıdaki CSS kodlarımızı ekliyoruz.

/*Start Css For Google Style Search Box*/
/* div container containing the form */
#searchContainer {
margin:20px;
}
/* Style the search input field. */
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}
/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcmZwC0KcTGKqLafdSP6gu3HiWjehByhFryBE0PZCwCw3g9vQeFbNABbNMeSWdUYpPMfyKO78pCgdmxXibenc4MJOCOs9z5PO2OfmwQ7Rg74kh8cHjc8ZVn_Trfg6JRiigTrP_Y_Ln2-9G/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcmZwC0KcTGKqLafdSP6gu3HiWjehByhFryBE0PZCwCw3g9vQeFbNABbNMeSWdUYpPMfyKO78pCgdmxXibenc4MJOCOs9z5PO2OfmwQ7Rg74kh8cHjc8ZVn_Trfg6JRiigTrP_Y_Ln2-9G/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}
/*End Google Style Search Bar

Temanızı kaydetmeden devam edin.Şimdi ise aşağıdaki kodumuzu aratın.

</head>

Yukarıdaki kodun hemen öncesine aşağıdaki JavaScript kodlarımızı ekliyoruz.

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

İster, temanızın bir bölümünde isterseniz de gadget olarak aşağıdaki kodlarımızı ekleyin.

<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

Evet işlemlerimiz bu kadar.Herhangi bir sorunda yorum olarak belirtebilirsiniz :)

Devamı »

Blogger CSS3 İle Oluşturulmuş Butonlar

Merhabalar,bir okurumun ricası üzerine bu buton kodlarını veriyorum.Butonlarımız CSS3 ile oluşturulmuştur.Her boyutta ve renkte butonlarımız bulunmaktadır.

Hepimiz blogumuzda zaman zaman indir,demo,izle,tıkla gibi bağlantılar veriyoruz.Bu bağlantıların daha şık olması için bu kodlarımız ile buton şeklini verebilirsiniz.Butonların demo hali aşağıdadır.Hemen kodlarımıza geçelim...

]]></b:skin>

Yukarıdaki kodu CTRL+F yardımı ile bulun.Hemen üstüne aşağıdaki CSS kodlarımızı ekleyin.

button{
 font:15px Calibri, Arial, sans-serif;
 /* A semi-transparent text shadow */
 text-shadow:1px 1px 0 rgba(255,255,255,0.4);

 /* Overriding the default underline styling of the links */
 text-decoration:none !important;
 white-space:nowrap;

 display:inline-block;
 vertical-align:baseline;
 position:relative;
 cursor:pointer;
 padding:10px 20px;

 background-repeat:no-repeat;
 /* The following two rules are fallbacks, in case
 the browser does not support multiple backgrounds. */
 background-position:bottom left;
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png');

 /* Multiple backgrounds version. The background images
 are defined individually in color classes */

 background-position:bottom left, top right, 0 0, 0 0;
 background-clip:border-box;

 /* Applying a default border raidus of 8px */

 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;

 /* A 1px highlight inside of the button */

 -moz-box-shadow:0 0 1px #fff inset;
 -webkit-box-shadow:0 0 1px #fff inset;
 box-shadow:0 0 1px #fff inset;

 /* Animating the background positions with CSS3 */
 /* Currently works only in Safari/Chrome */

 -webkit-transition:background-position 1s;
 -moz-transition:background-position 1s;
 transition:background-position 1s;
 }
 .button:hover{

 /* The first rule is a fallback, in case the browser
 does not support multiple backgrounds
 */

 background-position:top left;
 background-position:top left, bottom right, 0 0, 0 0;
 }
 .button:active{
 /* Moving the button 1px to the bottom when clicked */
 bottom:-1px;
 }
 /* The three buttons sizes */
 .button.big        { font-size:30px;}
 .button.medium    { font-size:18px;}
 .button.small    { font-size:13px;}
 /* A more rounded button */
 .button.rounded{
 -moz-border-radius:4em;
 -webkit-border-radius:4em;
 border-radius:4em;
 }

 /* Defining four button colors */

 /* BlueButton */
 .blue.button{
 color:#0f4b6d !important;

 border:1px solid #84acc3 !important;

 /* A fallback background color */
 background-color: #48b5f2;

 /* Specifying a version with gradients according to */

 background-image:    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'),
 -moz-radial-gradient(    center bottom, circle,
 rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
 -moz-linear-gradient(#4fbbf7, #3faeeb);
 background-image:    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'),
 -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
 from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
 }
 .blue.button:hover{
 background-color:#63c7fe;

 background-image:    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'),
 -moz-radial-gradient(    center bottom, circle,
 rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
 -moz-linear-gradient(#63c7fe, #58bef7);

 background-image:    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'),
 -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
 from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
 }
 /* Green Button */
 .green.button{
 color:#345903 !important;
 border:1px solid #96a37b !important; 
 background-color: #79be1e;

 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
 }
 .green.button:hover{
 background-color:#89d228;

 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
 }
 /* Orange Button */
 .orange.button{
 color:#693e0a !important;
 border:1px solid #bea280 !important; 
 background-color: #e38d27;

 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
 }
 .orange.button:hover{
 background-color:#ec9732;

 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
 }
 .gray.button{
 color:#525252 !important;
 border:1px solid #a5a5a5 !important; 
 background-color: #a9adb1;

 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
 }
 .gray.button:hover{
 background-color:#b6bbc0;

 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5wYWZuFF_MjCUDe5OwpoiiP8zS-KyAL1k7hrxNkh3ZXqlF4PlRCyCtGVkCesCF2tZfLBXTjQZH-alZgI9BAkB4HfXSgIUokwVxt3Lkeq-fHxj1R0YanpmYateZekxUzJo0U_ayUT6WMw/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
 }

Şimdi de HTML kodlarımız.

Büyük Boy Butonlar:

<a href="Link Buraya" class="button big blue">Yazı Buraya</a>

<a href="Link Buraya" class="button big green">Yazı Buraya</a>

<a href="Link Buraya" class="button big orange">Yazı Buraya</a>

<a href="Link Buraya" class="button big gray">Yazı Buraya</a>

Orta Boy Butonlar:

<a href="Link Buraya" class="button blue medium">Yazı Buraya</a> 

<a href="Link Buraya" class="button green medium">Yazı Buraya</a> 

<a href="Link Buraya" class="button orange medium">Yazı Buraya</a> 

<a href="Link Buraya" class="button gray medium">Yazı Buraya</a>

Küçük Boy Butonlar:

<a href="Link Buraya" class="button small blue">Yazı Buraya</a> 

<a href="Link Buraya" class="button small green">Yazı Buraya</a> 

<a href="Link Buraya" class="button small orange">Yazı Buraya</a> 

<a href="Link Buraya" class="button small gray">Yazı Buraya</a>

Oval ve Küçük Butonlar:

<a href="Link Buraya" class="button small blue rounded">Yazı Buraya</a> 

<a href="Link Buraya" class="button small green rounded">Yazı Buraya</a> 

<a href="Link Buraya" class="button small orange rounded">Yazı Buraya</a> 

<a href="Link Buraya" class="button small gray rounded">Yazı Buraya</a>

DEMOLAR

Yazı Buraya

Yazı Buraya

Yazı Buraya

Yazı Buraya

Bu butonları nasıl kullanabilirim ?

Sizlere verdiğim HTML kodlarını yazınızı yazarkan HTML'yi Düzenle bölümünden ekleyebilirsiniz.

Bu butonları nasıl Devamını Oku şeklinde yapabilirim ?
 
Sizlere verdiğim HTML kodlarında class="button medium gray rounded"> bu classı kendi devamını oku butonunuzun classı ile değiştirirseniz sorunuzun yanıtını alabilirsiniz. 

Şu şekilde anlatayım:

Çoğu temada devamını oku butonlarının div class'ı şu şekildedir,

<div class='jump-link'>

biz yukarıda bulunan jump-link yerine butonlarımızın classını ekleyeceğiz yani şöyle olacak,

<div class='button gray medium'>

Yukarıdaki kod bölümünde değişken olan iki yer var.
1- Gray yani renk seçimi.
2- Medium yani boyut seçimi.


Not:Bazı arkadaşlarda butonlar gelebilir fakat mouse ile üzerine gelince balon efektleri çalışmayabilir.Bu durumda CSS kodlarını aynı şekilde öncekileri silmeden tekrar ekleyiniz.Sorun çözülecektir.



Sıkıntı yaşadığınız,takıldığınız bir yer olursa yorum olarak ya da iletişim bölümünden sorabilirsiniz.

Devamı »