> Css3 > Web Tasarımcılar İçin CSS3 Modern Buton Tasarımı

Web tasarımcıların işine yarayacak 6 adet CSS buton tasarımını ve bu tasarımların dokümantasyonlarını içeren bağlantıları listeledik.

Bu yazıda, yalnızca CSS3’ü kullanarak sitenize koyabileceğiniz bazı elle seçilmiş, harika harika butonlar ve öğreticilerini inceleyeceğiz.

Bu butonlar farklı renk ve degrade seçeneğine, farklı şekillere veya fareyle üzerine gelindiğinde olan eylemlere göre farklılık göstermektedir. Aşağıdaki butonların demolarını incleyebilir isterseniz kendi dokümantasyonlarını inceleyebilirsiniz.

 

Akıllı Sabit Gezinme Düğmesi

[button style=”normal” color=”uckan-btn–blue” size=”uckan-btn–block” link=”https://codyhouse.co/demo/smart-fixed-navigation/index.html” target=”true”]ÖNİZLEME[/button]

[button style=”normal” color=”uckan-btn–green” size=”uckan-btn–block” link=”https://github.com/CodyHouse/smart-fixed-navigation/archive/master.zip” target=”true”]İNDİR[/button]

Nokta Gezinme Stilleri

[button style=”normal” color=”uckan-btn–blue” size=”uckan-btn–block” link=”https://tympanus.net/Development/DotNavigationStyles/” target=”true”]ÖNİZLEME[/button]

[button style=”normal” color=”uckan-btn–green” size=”uckan-btn–block” link=”http://tympanus.net/Development/DotNavigationStyles/DotNavigationStyles.zip” target=”true”]İNDİR[/button]

Shazam Benzeri Geçiş Düğmesi Efekti

[button style=”normal” color=”uckan-btn–blue” size=”uckan-btn–block” link=”https://tympanus.net/Tutorials/ShazamButtonEffect/” target=”true”]ÖNİZLEME[/button]

[button style=”normal” color=”uckan-btn–green” size=”uckan-btn–block” link=”http://tympanus.net/Tutorials/ShazamButtonEffect/ShazamButtonEffect.zip” target=”true”]İNDİR[/button]

Dairesel İlerleme Düğmesi Oluşturma

[button style=”normal” color=”uckan-btn–blue” size=”uckan-btn–block” link=”https://tympanus.net/Tutorials/CircularProgressButton/” target=”true”]ÖNİZLEME[/button]

[button style=”normal” color=”uckan-btn–green” size=”uckan-btn–block” link=”http://tympanus.net/Tutorials/CircularProgressButton/CircularProgressButton.zip” target=”true”]İNDİR[/button]

Onay Kutulu Düğme Anahtarları

[button style=”normal” color=”uckan-btn–blue” size=”uckan-btn–block” link=”http://tympanus.net/Tutorials/CSS3ButtonSwitches/” target=”true”]ÖNİZLEME[/button]

[button style=”normal” color=”uckan-btn–green” size=”uckan-btn–block” link=”http://tympanus.net/Tutorials/CSS3ButtonSwitches/CSS3ButtonSwitches.zip” target=”true”]İNDİR[/button]

Sahte elemanlı CSS Düğmeleri

[button style=”normal” color=”uckan-btn–blue” size=”uckan-btn–block” link=”http://tympanus.net/Tutorials/CSSButtonsPseudoElements/” target=”true”]ÖNİZLEME[/button]

[button style=”normal” color=”uckan-btn–green” size=”uckan-btn–block” link=”http://tympanus.net/Tutorials/CSSButtonsPseudoElements/CSSButtonsPseudoElements.zip” target=”true”]İNDİR[/button]

 

Bu makalede web tasarımcıların işine yarayacak 6 Adet CSS buton tasarımını ve bu tasarımların dokümantasyonlarını içeren bağlantıları listeledik. Siz de düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.

Bu yazıya yorum yapılmamış.

YORUMUNUZU YAPIN!