13 Mart 2021, 09:49
|
#1
|
|
|
Css ile buton yapımı
Alıntı:
|
Butonlar web sitelerinin oluşturan önemli öğelerden biridir. Butonlar; formlardaki eylemin son noktasıdır veya bir eylemi çağırmak için kullanılan bir öğedir. Butonlar bir bağlantı çeşidi gibi düşünülsede aslında bağlantılardan farklı yapılardır. Bağlantılar site içinde dolaşmayı sağlayan yapılardır(örneğin menü gibi), butonlar ise bir eylemi gerçekleştirmek için kullanılan bir öğedir.(örnek: formun gönder butonu)
|
Css kodlarını css dosyanıza ekleyiniz.
PHP- Kodu
.btn-sm{background:[URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=0099da]#0099da[/URL] color:[URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=FFF]#FFF[/URL] padding:6px 10px; border-radius:3px; text-decoration:none; font-size:12px;}
.btn-sm:hover{ background:[URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=074e68]#074e68[/URL]}
.btn{background:[URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=0099da]#0099da[/URL] color:[URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=FFF]#FFF[/URL] padding:10px 15px; border-radius:3px; text-decoration:none; }
.btn:hover{ background:[URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=074e68]#074e68[/URL]}
.btn-lg{background:[URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=0099da]#0099da[/URL] color:[URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=FFF]#FFF[/URL] padding:13px 20px; border-radius:3px; text-decoration:none; font-size:26px; }
.btn-lg:hover{ background:[URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=074e68]#074e68[/URL]}
.btn-block{background:[URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=0099da]#0099da[/URL] color:[URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=FFF]#FFF[/URL] width:96%; display:block; padding:12px 15px; border-radius:3px; text-decoration:none; text-align:center; }
.btn-block:hover{ background:[URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=074e68]#074e68[/URL]}
html kodlarını butonu nereye eklemek istiyorsanız oraya ekleyiniz.
PHP- Kodu
<h4><a href="https://www.ircrehberi.net/" target="_blank" class="btn-sm">Küçük Button</a></h4><br />
<h4><a href="https://www.ircrehberi.net/" target="_blank" class="btn">Normal Button</a></h4><br />
<h4><a href="https://www.ircrehberi.net/" target="_blank" class="btn-lg">Orta Button</a></h4><br />
<h4><a href="https://www.ircrehberi.net/" target="_blank" class="btn-block">Büyük Button</a></h4>
Sonuç
|
|
|
|