Opencart Türkiye Destek Sitesi ,E-Ticaret Yazılımı Destek Paylaşım Forumu

e-ticaretdersleri Tüm Mesajlarını Bul · Konu Tarihi: **09-10-2012 04:39 PM**

Herkese selam ar-ge sonucu ulaştığım css3 bir birinden güzel görsel butonları sunuyorum .

Önemli Not : İe de görünüm biraz bozuk firefox ve diğerlerinde sorunsuzdur.
Not 2: Kullanımıyla İlgili akşam bilgi vereceğim. Şuanda kendi pc'im de değilim

Evet arkadaşlar opencart o sıkıcı resimli butonlarıının yerine css3 ile dizayn edilmiş görsel açıdan zevkli butonlarımızın kurulumuna geldi ilk önce stanndart buton'u cssimizden silip atıyoruz.

Dosyamızı Açalım : catalog/view/theme/seninteman/stylesheet/ stylesheet.css

Bulalım :

PHP Kod:

/* button */
a.button, input.button {
    cursor: pointer;
    color: #FFFFFF;
    line-height: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    background: url('../image/button.png') top left repeat-x;
    -webkit-border-radius: 7px 7px 7px 7px;
    -moz-border-radius: 7px 7px 7px 7px;
    -khtml-border-radius: 7px 7px 7px 7px;
    border-radius: 7px 7px 7px 7px;
    -webkit-box-shadow: 0px 2px 2px #DDDDDD;
    -moz-box-shadow: 0px 2px 2px #DDDDDD;
    box-shadow: 0px 2px 2px #DDDDDD;
}
a.button {
    display: inline-block;
    text-decoration: none;
    padding: 6px 12px 6px 12px;
}
input.button {
    margin: 0;
    border: 0;
    height: 24px;
    padding: 0px 12px 0px 12px;
}
a.button:hover, input.button:hover {
    background: url('../image/button-active.png') repeat-x;
}
.buttons {
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    overflow: auto;
    padding: 6px;
    margin-bottom: 20px;
}
.buttons .left {
    float: left;
    text-align: left;
}
.buttons .right {
    float: right;
    text-align: right;
}
.buttons .center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
} 

Üstekinin Yeriine Bunları Ekleyelim :

PHP Kod:

/* button 
---------------------------------------------- */
.button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}

.bigrounded {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
.medium {
    font-size: 12px;
    padding: .4em 1.5em .42em;
}
.small {
    font-size: 11px;
    padding: .2em 1em .275em;
}

/* color styles 
---------------------------------------------- */

/* black */
.black {
    color: #d7d7d7;
    border: solid 1px #333;
    background: #333;
    background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
    background: -moz-linear-gradient(top,  #666,  #000);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
    background: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
    background: -moz-linear-gradient(top,  #444,  #000);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
    color: #666;
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
    background: -moz-linear-gradient(top,  #000,  #444);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}

/* gray */
.gray {
    color: #e9e9e9;
    border: solid 1px #555;
    background: #6e6e6e;
    background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
    background: -moz-linear-gradient(top,  #888,  #575757);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
    background: #616161;
    background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
    background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
    color: #afafaf;
    background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
    background: -moz-linear-gradient(top,  #575757,  #888);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}

/* white */
.white {
    color: #606060;
    border: solid 1px #b7b7b7;
    background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
    background: -moz-linear-gradient(top,  #fff,  #ededed);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
    background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
    color: #999;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
    background: -moz-linear-gradient(top,  #ededed,  #fff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}

/* orange */
.orange {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

/* red */
.red {
    color: #faddde;
    border: solid 1px #980c10;
    background: #d81b21;
    background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
    background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
    background: #b61318;
    background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
    background: -moz-linear-gradient(top,  #c9151b,  #a11115);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
    color: #de898c;
    background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
    background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}

/* blue */
.blue {
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    background: -moz-linear-gradient(top,  #00adee,  #0078a5);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
    background: #007ead;
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
    background: -moz-linear-gradient(top,  #0095cc,  #00678e);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
    color: #80bed6;
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    background: -moz-linear-gradient(top,  #0078a5,  #00adee);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

/* rosy */
.rosy {
    color: #fae7e9;
    border: solid 1px #b73948;
    background: #da5867;
    background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
    background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}
.rosy:hover {
    background: #ba4b58;
    background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
    background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}
.rosy:active {
    color: #dca4ab;
    background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
    background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
}

/* green */
.green {
    color: #e8f0de;
    border: solid 1px #538312;
    background: #64991e;
    background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
    background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}
.green:hover {
    background: #538018;
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
    background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}
.green:active {
    color: #a9c08c;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -moz-linear-gradient(top,  #4e7d0e,  #7db72f);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}

/* pink */
.pink {
    color: #feeef5;
    border: solid 1px #d2729e;
    background: #f895c2;
    background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
    background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.pink:hover {
    background: #d57ea5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
    background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}
.pink:active {
    color: #f3c3d9;
    background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
    background: -moz-linear-gradient(top,  #f171ab,  #feb1d3);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
} 

Şimdi Kullanımı : Bütün TPL dosyalarında module / product ve diğer kullandığınız sayfalarda

class="button" Şekinde olanı aşağıda verdiğim isteğe classları kullana bilirsiniz

PHP Kod:

class="button black"
     class="button black bigrounded"
     class="button black medium"
     class="button black small" 

Farklı şekil ve renk isteyen olursa aşağıdaki class" ile başlayan kısımarı ekleme / silme yöntemiyle hangisi hoşunuza giderse onu kullanabileceksiniz

PHP Kod:

<div>
    <a href="#" class="button black">Rectangle</a>  or
    <a href="#" class="button black bigrounded">Rounded</a> Can be
    <a href="#" class="button black medium">Medium</a> or 
    <a href="#" class="button black small">Small</a>
    <br /><br />
    <input class="button black" type="button" value="Input Element" /> 
    <button class="button black">Button Tag</button>
    <span class="button black">Span</span> 
    <div class="button black">Div</div> 
    <p class="button black">P Tag</p> 
    <h3 class="button black">H3</h3> 
</div>

<div>
    <a href="#" class="button gray">Gray</a> 
    <a href="#" class="button gray bigrounded">Rounded</a> 
    <a href="#" class="button gray medium">Medium</a> 
    <a href="#" class="button gray small">Small</a> 
    <br /><br />
    <input class="button gray" type="button" value="Input Element" /> 
    <button class="button gray">Button Tag</button>
    <span class="button gray">Span</span> 
    <div class="button gray">Div</div> 
    <p class="button gray">P Tag</p> 
    <h3 class="button gray">H3</h3> 
</div>

<div>
    <a href="#" class="button white">White</a> 
    <a href="#" class="button white bigrounded">Rounded</a> 
    <a href="#" class="button white medium">Medium</a> 
    <a href="#" class="button white small">Small</a> 
    <br /><br />
    <input class="button white" type="button" value="Input Element" /> 
    <button class="button white">Button Tag</button>
    <span class="button white">Span</span> 
    <div class="button white">Div</div> 
    <p class="button white">P Tag</p> 
    <h3 class="button white">H3</h3> 
</div>

<div>
    <a href="#" class="button orange">Orange</a> 
    <a href="#" class="button orange bigrounded">Rounded</a> 
    <a href="#" class="button orange medium">Medium</a> 
    <a href="#" class="button orange small">Small</a> 
    <br /><br />
    <input class="button orange" type="button" value="Input Element" /> 
    <button class="button orange">Button Tag</button>
    <span class="button orange">Span</span> 
    <div class="button orange">Div</div> 
    <p class="button orange">P Tag</p> 
    <h3 class="button orange">H3</h3> 
</div>

<div>
    <a href="#" class="button red">Red</a> 
    <a href="#" class="button red bigrounded">Rounded</a> 
    <a href="#" class="button red medium">Medium</a> 
    <a href="#" class="button red small">Small</a> 
    <br /><br />
    <input class="button red" type="button" value="Input Element" /> 
    <button class="button red">Button Tag</button>
    <span class="button red">Span</span> 
    <div class="button red">Div</div> 
    <p class="button red">P Tag</p> 
    <h3 class="button red">H3</h3> 
</div>

<div>
    <a href="#" class="button blue">Blue</a> 
    <a href="#" class="button blue bigrounded">Rounded</a> 
    <a href="#" class="button blue medium">Medium</a> 
    <a href="#" class="button blue small">Small</a> 
    <br /><br />
    <input class="button blue" type="button" value="Input Element" /> 
    <button class="button blue">Button Tag</button>
    <span class="button blue">Span</span> 
    <div class="button blue">Div</div> 
    <p class="button blue">P Tag</p> 
    <h3 class="button blue">H3</h3> 
</div>

<div>
    <a href="#" class="button rosy">Rosy</a> 
    <a href="#" class="button rosy bigrounded">Rounded</a> 
    <a href="#" class="button rosy medium">Medium</a> 
    <a href="#" class="button rosy small">Small</a> 
    <br /><br />
    <input class="button rosy" type="button" value="Input Element" /> 
    <button class="button rosy">Button Tag</button>
    <span class="button rosy">Span</span> 
    <div class="button rosy">Div</div> 
    <p class="button rosy">P Tag</p> 
    <h3 class="button rosy">H3</h3> 
</div>

<div>
    <a href="#" class="button green">Green</a> 
    <a href="#" class="button green bigrounded">Rounded</a> 
    <a href="#" class="button green medium">Medium</a> 
    <a href="#" class="button green small">Small</a> 
    <br /><br />
    <input class="button green" type="button" value="Input Element" /> 
    <button class="button green">Button Tag</button>
    <span class="button green">Span</span> 
    <div class="button green">Div</div> 
    <p class="button green">P Tag</p> 
    <h3 class="button green">H3</h3> 
</div>

<div>
    <a href="#" class="button pink">Pink</a> 
    <a href="#" class="button pink bigrounded">Rounded</a> 
    <a href="#" class="button pink medium">Medium</a> 
    <a href="#" class="button pink small">Small</a> 
    <br /><br />
    <input class="button pink" type="button" value="Input Element" /> 
    <button class="button pink">Button Tag</button>
    <span class="button pink">Span</span> 
    <div class="button pink">Div</div> 
    <p class="button pink">P Tag</p> 
    <h3 class="button pink">H3</h3> 
</div> 

ITECHINN Tüm Mesajlarını Bul · Konu Tarihi: **09-10-2012 05:02 PM**

(09-10-2012 04:39 PM)Kiroglumarket Yazılan: Herkese selam ar-ge sonucu ulaştığım css3 bir birinden güzel görsel butonları sunuyorum .

Önemli Not : İe de görünüm biraz bozuk firefox ve diğerlerinde sorunsuzdur.
Not 2: Kullanımıyla İlgili akşam bilgi vereceğim. Şuanda kendi pc'im de değilim

Eline emeğine sağlık üstadım. Teşekkür ederim.

bu arada ie'de görüntünün bozuk olma sebebi, box-shadow ve round değerlerini henüz tam tanımıyor olması ancak uyumluluk modunda az da olsa sorunsuz çalışmakta. Yuvarlamalar sorun çıkartsa da köşeli olarak iş yapmakta.

Zaten bu IE neyi tam çalıştırıyor anlamadım ki :]]

e-ticaretdersleri Tüm Mesajlarını Bul · Konu Tarihi: **09-10-2012 05:08 PM**

(09-10-2012 05:02 PM)ITECHINN Yazılan:
(09-10-2012 04:39 PM)Kiroglumarket Yazılan: Herkese selam ar-ge sonucu ulaştığım css3 bir birinden güzel görsel butonları sunuyorum .

Önemli Not : İe de görünüm biraz bozuk firefox ve diğerlerinde sorunsuzdur.
Not 2: Kullanımıyla İlgili akşam bilgi vereceğim. Şuanda kendi pc'im de değilim

Eline emeğine sağlık üstadım. Teşekkür ederim.

bu arada ie'de görüntünün bozuk olma sebebi, box-shadow ve round değerlerini henüz tam tanımıyor olması ancak uyumluluk modunda az da olsa sorunsuz çalışmakta. Yuvarlamalar sorun çıkartsa da köşeli olarak iş yapmakta.

Zaten bu IE neyi tam çalıştırıyor anlamadım ki :]]

Yorum İçin teşekkürler devamı gelecek ....

e-ticaretdersleri Tüm Mesajlarını Bul · Konu Tarihi: **09-10-2012 09:16 PM**

Anlatım Yapılmıştır Bu Geceye doru ikinci mofiyeyide sunacağım


Direk Link
HTML Link
BBCode Link
Sosyal Paylaş	Sabah net google facebook digg twiter yahoo mixx stumbleupon delicious reddit myspace friendfeed google buzz linkedin

Benzeyen Konular
Konu:		Yazar	Cevaplar:	Gösterim:	Son Mesaj
	[Modifikasyon] Opencart modullerde yada kategorilerde arttırma azlatma butonları Yayınlandı	e-ticaretdersleri	7	4,105	06-07-2015 06:24 PM Son Mesaj: turkojen34
	[Modifikasyon] Photobox Resim Görüntüleyici \| Photobox - CSS3 image gallery modal viewer	Gökhan TAYLAN	5	4,535	12-21-2014 12:14 AM Son Mesaj: venom839
	[Eklenti] Standart Kategoriye Css3 Modifiyesi	e-ticaretdersleri	10	6,817	11-23-2014 04:36 AM Son Mesaj: turkojen34
	Moduller İçin Güzel Bir Css Eklentisi -1 (Kiroglumarket)	BLaDe	4	4,163	07-11-2013 05:10 PM Son Mesaj: nokta
	Moduller İçin Güzel Bir Css Eklentisi	e-ticaretdersleri	7	4,120	06-20-2013 06:40 PM Son Mesaj: BLaDe
	Yardim! alisveris sepeti kayboluyor ve sepete ekle butonlari calismiyor.	mummybks	0	1,986	02-28-2013 11:41 AM Son Mesaj: mummybks
	Butonları nasıl sabitleyebilirim ?	meminho	6	3,841	11-22-2012 02:52 PM Son Mesaj: sekhil
	Uyuyan Devden Güzel Bir Paylaşım Oynak Menu :D	e-ticaretdersleri	5	3,738	10-16-2012 01:33 PM Son Mesaj: nokta
	Üst Sepette Arttırma Ve Azaltma Butonları	e-ticaretdersleri	0	2,371	10-09-2012 03:46 PM Son Mesaj: e-ticaretdersleri

	Şuanki Zaman: 12-19-2024, 08:13 AMHoşgeldin Misafir !
	Beni Hatırla Şifremi Hatırlat

« Önceki \| Sonraki »

Opencart Türkiye Destek Sitesi ,E-Ticaret Yazılımı Destek Paylaşım Forumu

Tema Bir Birinden Güzel Css3 Görsel Butonları