Tạo nút bấm "lung linh" cho web và blog bằng hiệu ứng CSS3

Sáng nay ngồi vọc cái nút bấm cho trang web, nhớ lại ngày xưa, lúc mới tập tành làm web, muốn nút (button) thay đổi màu sắc, hình ảnh, phải dùng một hình ảnh cho mỗi trạng thái. Đồng nghĩa với việc trang web bạn có 10 nút bấm, bạn phải tốn từ 10 đến 30 hình ảnh cho từng nút.

Tạo nút bấm "lung linh" cho web và blog bằng hiệu ứng CSS3

Đó là cách đây khoảng 5-7 năm về trước. Hôm nay, CSS3 đang dần định hình, mọi thứ đều có thể làm được chỉ với vài dòng chữ: Một bước tiến của công nghệ.

Button này là chưa định dạng:

Và button này đã định dạng:

Bạn thử gõ một dòng chữ vào textbox và click nút “Click here” nha ^^

Bắt đầu code nào.

Thẻ HTML

Chúng ta tạo một DIV bọc lấy phần nội dung cần định dạng (để dễ “chọn” trong CSS). Trong DIV này tạo một INPUT có type=button.

<section>
<div class="custom-button"><input class="button" type="button" name="go" value="Click here" /> <input type="text" name="text-field" value="Hello World" /></div>
</section>

Định dạng với CSS

Bạn để ý phần Selector nhé. [type=button] giúp chọn đúng ngay thằng button. Nếu bỏ qua phần này, CSS sẽ chọn luôn cả thằng textbox (type=text) vì chúng đều là INPUT.

Ta định dạng màu nền, gradient, màu chữ, tạo bóng, viền… Xác lập con trỏ hiện hình pointer (bàn tay) khi rà chuột lên button.

.custom-button input[type=button]  {
	background: #2468af;
	background: -moz-linear-gradient(top, #2468af 1%, #1144ff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#2468af), color-stop(100%,#1144ff));
	background: -webkit-linear-gradient(top, #2468af 1%,#1144ff 100%);
	background: -o-linear-gradient(top, #2468af 1%,#1144ff 100%);
	background: -ms-linear-gradient(top, #2468af 1%,#1144ff 100%);
	background: linear-gradient(top, #2468af 1%,#1144ff 100%);
	border: 1px solid #a3a3a3;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	box-shadow: 1px 1px 1px rgba(155,155,155,0.5);
	color: #f3f3f3;
	cursor: pointer;
	font-weight: 700;
	padding: 0.6em 1.5em;
	text-shadow: 1px 1px 1px rgba(155,155,155,0.5);
}

Tạo hiệu ứng đổi màu nền khi rà chuột lên đối tượng.

.custom-button input[type=button]:hover {
	color: #fff;
	background: #1144ff;
}

Cuối cùng là màu nền khi click chuột.

.custom-button input[type=button]:active {
	background: #2468af;
}

Xong, đơn giản thế thôi, bạn đã tiết kiệm được hơn 3 hình button rồi. Nhanh gọn và nhẹ nhàng đúng không nào ^^

Bonus: Tạo nút download

Bạn thêm thuộc tính onClick cho button như sau. Chỗ bạn thay bằng URL (link) cần trỏ tới. Chẳng hạn như dòng dưới, thay bằng https://www.dropbox.com/s/zkwc6b2mgqjpxgd/CSS3-Buttons.zip, nhớ đặt trong dấu nháy đơn ‘ ‘ nha.

<input onclick="window.open('<đường_dẫn>','_blank')" type="button" name="go" value="Download Source" />

<input onclick="window.open('https://www.dropbox.com/s/zkwc6b2mgqjpxgd/CSS3-Buttons.zip','_blank')" type="button" name="go" value="Download Source" />

Kết quả của đoạn code trên là button sau. Và bạn click vào nút bên dưới để tải Source code về nhé ^^

8 thoughts on “Tạo nút bấm "lung linh" cho web và blog bằng hiệu ứng CSS3

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s