Buton Kodları | En iyi Sözler ve Blog Sitesi
Günün Sözü

Buton Kodları

Buton Kodları

Buton Kodları

Bu Yazımızda

Buton Kodları, HTML Buton Ekleme, HTML Buton Yapma Kodları, Renkli Buton Kodları, 3D CSS Buton Kodu, Farklı Renklerde 3D Buton Kodları, Göçme Efektli Buton Kodları, Renkli Düz Buton Kodları

Detaylar Yazımızda…

 


Farklı Renklerde 3D Buton Kodları

 

<!— wWw.Eniyisozler.Net Kod Başlangıcı —>
<section class="container">
    <a href="https://www.eniyisozler.net/" class="button">Örnek Gösterim</a>
    <a href="https://www.eniyisozler.net/" class="button green">Örnek Gösterim</a>
    <a href="https://www.eniyisozler.net/" class="button blue">Örnek Gösterim</a>
    <a href="https://www.eniyisozler.net/" class="button yellow">Örnek Gösterim</a><br>
    <a href="https://www.eniyisozler.net/" class="button red">Örnek Gösterim</a>
    <a href="https://www.eniyisozler.net/" class="button purple">Örnek Gösterim</a>
    <a href="https://www.eniyisozler.net/" class="button grey">Örnek Gösterim</a>
    <a href="https://www.eniyisozler.net/" class="button black">Örnek Gösterim</a>
</section>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.about {
  margin: 70px auto 40px;
  padding: 8px;
  width: 260px;
  font: 10px/18px 'Lucida Grande', Arial, sans-serif;
  color: #bbb;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  background: #383838;
  background: rgba(34, 34, 34, 0.8);
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
}
.about a {
  color: #eee;
  text-decoration: none;
  border-radius: 2px;
  -webkit-transition: background 0.1s;
  -moz-transition: background 0.1s;
  -o-transition: background 0.1s;
  transition: background 0.1s;
}
.about a:hover {
  text-decoration: none;
  background: #555;
  background: rgba(255, 255, 255, 0.15);
}

.about-links {
  height: 30px;
}
.about-links > a {
  float: left;
  width: 50%;
  line-height: 30px;
  font-size: 12px;
}

.about-author {
  margin-top: 5px;
}
.about-author > a {
  padding: 1px 3px;
  margin: 0 -1px;
}
body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #fafafa;
}

.container {
  margin: 20px auto;
  width: 640px;
  text-align: center;
}
.container .button {
  margin: 0 10px 25px;
}

.button {
  margin: 0 0 5px;
  padding: 0 12px;
  height: 28px;
  line-height: 28px;
  font-size: 11px;
  font-weight: bold;
  color: #555555;
  text-decoration: none;
  text-shadow: 0 1px white;
  background: #dfdfdf;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: #cecece #bababa #a8a8a8;
  border-radius: 3px 3px 2px 2px;
  outline: 0;
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background-image: -webkit-linear-gradient(top, #f1f1f1, #dfdfdf 70%, #dadada);
  background-image: -moz-linear-gradient(top, #f1f1f1, #dfdfdf 70%, #dadada);
  background-image: -o-linear-gradient(top, #f1f1f1, #dfdfdf 70%, #dadada);
  background-image: linear-gradient(to bottom, #f1f1f1, #dfdfdf 70%, #dadada);
  -webkit-box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25);
}
.button:hover, .button:active {
  background: #dfdfdf;
  border-top-color: #c9c9c9;
}
.button:active, .button.green:active, .button.blue:active, .button.yellow:active, .button.red:active, .button.purple:active, .button.grey:active, .button.black:active {
  vertical-align: -5px;
  margin-bottom: 0;
  padding: 1px 13px 0;
  border-width: 0;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
}
.button.green {
  color: #465f25;
  text-shadow: 0 1px #d9f3b5;
  background: #94d362;
  border-color: #91ce5e #7ab04b #5e903f;
  background-image: -webkit-linear-gradient(top, #c0eb85, #94d362 70%, #8ed258);
  background-image: -moz-linear-gradient(top, #c0eb85, #94d362 70%, #8ed258);
  background-image: -o-linear-gradient(top, #c0eb85, #94d362 70%, #8ed258);
  background-image: linear-gradient(to bottom, #c0eb85, #94d362 70%, #8ed258);
  -webkit-box-shadow: inset 0 1px #d9f3b5, inset 0 0 0 1px #b1e095, 0 1px #5e903f, 0 3px #6da445, 0 4px #5e903f, 0 5px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px #d9f3b5, inset 0 0 0 1px #b1e095, 0 1px #5e903f, 0 3px #6da445, 0 4px #5e903f, 0 5px 2px rgba(0, 0, 0, 0.4);
}
.button.green:hover, .button.green:active {
  background: #94d362;
  border-top-color: #82bd53;
}
.button.blue {
  color: #236277;
  text-shadow: 0 1px #c2ecf9;
  background: #61cdf3;
  border-color: #6fbad1 #3fa3c0 #3583ab;
  background-image: -webkit-linear-gradient(top, #9be5fa, #61cdf3 70%, #5fbde8);
  background-image: -moz-linear-gradient(top, #9be5fa, #61cdf3 70%, #5fbde8);
  background-image: -o-linear-gradient(top, #9be5fa, #61cdf3 70%, #5fbde8);
  background-image: linear-gradient(to bottom, #9be5fa, #61cdf3 70%, #5fbde8);
  -webkit-box-shadow: inset 0 1px #c5f0fd, inset 0 0 0 1px #8ad1eb, 0 1px #3583ab, 0 3px #3f9db8, 0 4px #3583ab, 0 5px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px #c5f0fd, inset 0 0 0 1px #8ad1eb, 0 1px #3583ab, 0 3px #3f9db8, 0 4px #3583ab, 0 5px 2px rgba(0, 0, 0, 0.4);
}
.button.blue:hover, .button.blue:active {
  background: #61cdf3;
  border-top-color: #3eaac9;
}
.button.yellow {
  color: #7e4f27;
  text-shadow: 0 1px #f2e294;
  background: #f6ba49;
  border-color: #efb443 #d9a238 #a57825;
  background-image: -webkit-linear-gradient(top, #ffdd67, #f6ba49 70%, #f4b03e);
  background-image: -moz-linear-gradient(top, #ffdd67, #f6ba49 70%, #f4b03e);
  background-image: -o-linear-gradient(top, #ffdd67, #f6ba49 70%, #f4b03e);
  background-image: linear-gradient(to bottom, #ffdd67, #f6ba49 70%, #f4b03e);
  -webkit-box-shadow: inset 0 1px #ffeca6, inset 0 0 0 1px #e5c96d, 0 1px #a57825, 0 3px #c08a28, 0 4px #a57825, 0 5px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px #ffeca6, inset 0 0 0 1px #e5c96d, 0 1px #a57825, 0 3px #c08a28, 0 4px #a57825, 0 5px 2px rgba(0, 0, 0, 0.4);
}
.button.yellow:hover, .button.yellow:active {
  background: #f6ba49;
  border-top-color: #e5ab3d;
}
.button.red {
  color: #702526;
  text-shadow: 0 1px #ea8f99;
  background: #e46565;
  border-color: #e1696e #c85252 #a03a38;
  background-image: -webkit-linear-gradient(top, #eb9093, #e46565 70%, #e25755);
  background-image: -moz-linear-gradient(top, #eb9093, #e46565 70%, #e25755);
  background-image: -o-linear-gradient(top, #eb9093, #e46565 70%, #e25755);
  background-image: linear-gradient(to bottom, #eb9093, #e46565 70%, #e25755);
  -webkit-box-shadow: inset 0 1px #dcaaaa, inset 0 0 0 1px #df777a, 0 1px #a03a38, 0 3px #be4b49, 0 4px #a03a38, 0 5px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px #dcaaaa, inset 0 0 0 1px #df777a, 0 1px #a03a38, 0 3px #be4b49, 0 4px #a03a38, 0 5px 2px rgba(0, 0, 0, 0.4);
}
.button.red:hover, .button.red:active {
  background: #e46565;
  border-top-color: #d0585a;
}
.button.purple {
  color: #714667;
  text-shadow: 0 1px #f2c5e6;
  background: #e393d3;
  border-color: #e391d0 #c27ab3 #8a517d;
  background-image: -webkit-linear-gradient(top, #f1bee3, #e393d3 70%, #df8dce);
  background-image: -moz-linear-gradient(top, #f1bee3, #e393d3 70%, #df8dce);
  background-image: -o-linear-gradient(top, #f1bee3, #e393d3 70%, #df8dce);
  background-image: linear-gradient(to bottom, #f1bee3, #e393d3 70%, #df8dce);
  -webkit-box-shadow: inset 0 1px #f5d6ee, inset 0 0 0 1px #dcaacf, 0 1px #8a517d, 0 3px #a7619a, 0 4px #8a517d, 0 5px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px #f5d6ee, inset 0 0 0 1px #dcaacf, 0 1px #8a517d, 0 3px #a7619a, 0 4px #8a517d, 0 5px 2px rgba(0, 0, 0, 0.4);
}
.button.purple:hover, .button.purple:active {
  background: #e393d3;
  border-top-color: #c87eb8;
}
.button.grey {
  color: #41505b;
  text-shadow: 0 1px #c2d0db;
  background: #90aabd;
  border-color: #909eab #768791 #50606e;
  background-image: -webkit-linear-gradient(top, #bccbd7, #90aabd 70%, #83a0b4);
  background-image: -moz-linear-gradient(top, #bccbd7, #90aabd 70%, #83a0b4);
  background-image: -o-linear-gradient(top, #bccbd7, #90aabd 70%, #83a0b4);
  background-image: linear-gradient(to bottom, #bccbd7, #90aabd 70%, #83a0b4);
  -webkit-box-shadow: inset 0 1px #d0dae2, inset 0 0 0 1px #99b5ce, 0 1px #50606e, 0 3px #627786, 0 4px #50606e, 0 5px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px #d0dae2, inset 0 0 0 1px #99b5ce, 0 1px #50606e, 0 3px #627786, 0 4px #50606e, 0 5px 2px rgba(0, 0, 0, 0.4);
}
.button.grey:hover, .button.grey:active {
  background: #90aabd;
  border-top-color: #8495a0;
}
.button.black {
  color: #f1f1f1;
  text-shadow: 0 1px #111;
  background: #4f4f4f;
  border-color: #505050 #414141 #2c2c2c;
  background-image: -webkit-linear-gradient(top, dimgrey, #4f4f4f 70%, #3c3c3c);
  background-image: -moz-linear-gradient(top, dimgrey, #4f4f4f 70%, #3c3c3c);
  background-image: -o-linear-gradient(top, dimgrey, #4f4f4f 70%, #3c3c3c);
  background-image: linear-gradient(to bottom, dimgrey, #4f4f4f 70%, #3c3c3c);
  -webkit-box-shadow: inset 0 1px #828282, inset 0 0 0 1px #555555, 0 1px #2c2c2c, 0 3px #444444, 0 4px #2c2c2c, 0 5px 2px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px #828282, inset 0 0 0 1px #555555, 0 1px #2c2c2c, 0 3px #444444, 0 4px #2c2c2c, 0 5px 2px rgba(0, 0, 0, 0.4);
}
.button.black:hover, .button.black:active {
  background: #4f4f4f;
  border-top-color: #494949;
}

.lt-ie9 .button {
  border-width: 1px;
  padding: 0 12px;
}

</style>
<!— wWw.Eniyisozler.Net Kod Sonu —>


Bu yazı 930 kez okundu.

Bu İçeriğe Tepkin Ne Oldu?

Sosyal Medyada Paylaşın:

SON EKLENENLER

Abone Ol
Bildir
guest
0 Yorum
Satır İçi Geri Bildirimler
Tüm yorumları görüntüle
Sponsorlu Bağlantılar
  • ÇOK OKUNAN
  • YENİ
  • YORUM
2020-08-05 21:31:46
Gökçe Leyla: ÖZGÜRLÜK HERKES İÇİN Bir umuttur özgürlük yaşayan her insan için. Hayata tutunmayı sağlayan. Bir
2020-08-04 23:10:32
Sezen: :D :D :D
2020-07-31 22:47:55
Sıla: :D
2020-05-31 00:27:49
2020-04-09 19:23:59
2020-04-09 19:17:59
0
Düşüncelerinizi yazmak istermisiniz? Lütfen yorum yapın.x
()
x