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







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.
Bu Filmi Paylaş :

0 yorum:

Yorum Gönder

Layer"

Reklam

 
Support : Türkçe | Blogger | Temaları
Copyright © 2014 Film Siteleri - Tüm Hakları Saklıdır
Filmsitelerin.blogspot.comTürkçe Blogger Temaları
powered by Filmsiteleri.net