CSS3 - một chuẩn CSS cao hơn dành cho việc dàn trang (tạo layout) các ứng dụng web - đang dần được sử dụng khá phổ biến. CSS3 đang dần khẳng định vị trí và thế mạnh của mình so với đàn em cực kì phổ biến và nổi tiếng: CSS2; thông qua sự hỗ trợ mạnh mẽ từ các trình duyệt hiện đại hiện nay: Firefox 3.5+, Google Chrome, Safari, ...

Chuẩn CSS3 hiện có rất nhiều đặc tả kĩ thuật cũng như tính năng mới. Tuy nhiên, trong phạm vi bài viết này, tác giả chỉ đề cập đến khả năng xây dựng các nút nhấn cực kì độc đáo và tuyệt đẹp với CSS3. Bạn vui lòng vào trang bài viết chi tiết để xem các địa chỉ tài nguyên này.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

CSS3 is the partially implemented sequel to the CSS2 spec we all know and
love. It's already popping up in new browsers such as Firefox 3.5, Safari 4 and
Chrome. In this article, the first of the articles that explore practical (and
even far-fetched) implementation of CSS3, we start by applying CSS3 to something
we all have to create: buttons.

Calls to action are critical for any website, and a compelling,
attention-grabbing, clickable button goes a long way toward driving that
engagement. In the past, really awesome buttons needed extra markup, sliding
doors or other trickery. We'll show you here how to create nice button styles
without any hacks or cheats.

Demo:
http://www.smashingmagazine.com/2009/12/02/pushing-your-buttons-with-practical-css3/

Simply Butons v2 with Javascript Enhancements

p51Labs came up with the  v2. Buttons auto resize itself to fit text. There are 3 states:
Inactive, Active, and Hover. They look and behave the same way in every browser
and operating system. However, the caveats are the outlines on the buttons, the
text is selectable. And These buttons are not mobile friendly.

With Simply-Buttons Javascript component provided, you can solve the caveats
above as well. You can easily modify the buttons look and feel. You can do this
by creating your own stylesheet.

Demo: http://www.p51labs.com/simply-buttons-v2/

How to Create Glowing, Radioactive Buttons with CSS

Using CSS animations in Safari, we're able to turn an otherwise ordinary
button into a glowing,  Buttons. Be sure you're in Safari / Chrome browser before getting
underway. You can set the Animation name, Animation duration and the
number of times it repeats.

You can see how these come together on the right. The CSS calls a pre-defined
animation you create, assigns it a duration, and tells it how long to repeat.
Pretty sweet, right?

Demo: http://www.zurb.com/playground/radioactive-buttons

Note: Demo works best in Safari 4.x and, um, not so much in Firefox 3.5.

Colorful and Scalable Buttons with CSS3 & RGBA

One of great things about CSS3 is the addition of RGBA, a color mode that
adds alpha-blending to your favorite CSS properties. ZURB has kicked the tires
on it a bit with their own projects and have found that it helps streamline
their CSS and makes scaling things like buttons very easy. To show you how, ZURB
has cooked up an example of some  Awesome Buttons with CSS3 and RGBA.

With a little CSS3 magic, we can create a scalable set of buttons with nearly
half the CSS it would have taken with hex colors. Give it a go in your next
project and see how it can help add that extra polish you want without huge
impact on your code.

Demo: http://www.zurb.com/blog_uploads/0000/0401/buttons-01.html

Beautiful Scalable CSS Buttons

Kitchen wrote an article: CSS Buttons Using PNG and Background Colors taught us how to create dynamic
CSS Buttons using PNG, transparency and background colors that degrades nicely
and supports full scalability.

It is really handy for developers because the length of the button will be
changed according to the length of the text. The buttons are very pretty with
Web 2.0 style. The color of the button changed if you hover on it. However, the
buttons are not looking very nice in Internet Explorer 6.0, hope there is a
version which supports IE 6.0 as well soon.

Demo: http://monc.se/kitchen/stew/buttons/btn.html

Simple Round CSS Buttons ( Wii Buttons )

Hedger Wang teaches us how to create rounded corner buttons with only One
Image and One
CSS file. Users can see different state of the buttons, e.g.
disabled, mouseover and mouseout state. So that the users can feel more
interactive with the website or web application. We can also use this technics
to create Wii-like buttons.

Demo: http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php

• Mã nguồn
• In

• Lời bình (1)
• Viết

bởi Ian Harte, 09/06/2011 04:06 PM
Phản hồi

Nice freebie post! Not sure I'm overly keen on any of these though! Keep them coming though.

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới