Tạo button với hiệu ứng bong bóng lạ và đẹp bằng CSS3 cho webs, blogs của bạn

Tạo button với hiệu ứng bong bóng lạ và đẹp bằng CSS3 cho webs, blogs của bạn

Hôm nay JBB sẽ giới thiệu đến các bạn button với hoạt ảnh bong bóng và những hiệu ứng đẹp, lạ mắt cho website, blog của bạn. Tạo button với hiệu ứng bong bóng lạ và đẹp cho webs, blogs của bạn.

Demo:

Big Button Big Button Big Button Big Button

Medium Button Medium Button Medium Button Medium Button

Small Button Small Button Rounded

Small Button Small Button Rounded

Với HTML:

Khi chúng post link chỉ cần thêm thuộc tính .button vào class của nó.

Download
Submit
Submit
Ở đây chúng ta có 3 size là "big" "medium" "small" và thuộc tính "rounded" là bo tròn góc của button.

Với CSS:

Đầu tiên chúng ta tạo hiệu ứng cho button, mình đã viết thêm chú thích cho người mới tìm hiểu về CSS3.
.button{
 font:15px Calibri, Arial, sans-serif;

 /* Đổ bóng chữ trong button */
 text-shadow:1px 1px 0 rgba(255,255,255,0.4);
 
 /* Xóa gạch chân cho đường link */
 text-decoration:none !important;
 white-space:nowrap;
 
 display:inline-block;
 vertical-align:baseline;
 position:relative;
 cursor:pointer;
 padding:10px 20px;
 
 background-repeat:no-repeat;
 background-position:bottom left;
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png');
 background-position:bottom left, top right, 0 0, 0 0;
 background-clip:border-box;
 
 /* Bo tròn góc với 8px */
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
 
 /* Tạo 1px với màu sáng để làm nổi bật button */
 -moz-box-shadow:0 0 1px #fff inset;
 -webkit-box-shadow:0 0 1px #fff inset;
 box-shadow:0 0 1px #fff inset;
 
 /* Tạo các hình động với nền bằng CSS3 */
 /* Chỉ hỗ trợ hiển thị trên trình duyệt Safari/Chrome */
 
 -webkit-transition:background-position 1s;
 -moz-transition:background-position 1s;
 transition:background-position 1s;
}

.button:hover{
 background-position:top left;
 background-position:top left, bottom right, 0 0, 0 0;
}

.button:active{
 /* Di chuyển button 1px xuống phía dưới khi nhấp chuột vào */
 bottom:-1px;
}

Tiếp theo tạo ra 3 size cho button, hãy chỉnh sửa cho phù hợp với web, blog của bạn. Dưới đây là ba lớp học kích thước - nhỏ, vừa và lớn, và lớp tròn. Các nút bấm rộng theo kích thước văn bản của bạn. Bằng cách này rõ ràng nó sẽ tự chỉnh size (độ lớn) theo văn bản.
/* 3 size cho button */

.button.big  { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}

/* Một nút tròn hơn */

.button.rounded{
 -moz-border-radius:4em;
 -webkit-border-radius:4em;
 border-radius:4em;
}

Dưới đây là 4 màu có sẵn của button .blue .orange .green .gray
/* BlueButton */

.blue.button {
  color:#0f4b6d !important;
  border:1px solid #84acc3 !important;
  background-color:#48b5f2;
  background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),-moz-radial-gradient( center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb);
  background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1)),to(rgba(89,208,244,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#4fbbf7),to(#3faeeb));
}

.blue.button:hover {
  background-color:#63c7fe;
  background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),-moz-radial-gradient( center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7);
  background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1)),to(rgba(109,217,250,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#63c7fe),to(#58bef7));
}

/* Green Button */

.green.button{
 color:#345903 !important;
 border:1px solid #96a37b !important; 
 background-color: #79be1e;
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}

.green.button:hover{
 background-color:#89d228;
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}

/* Orange Button */

.orange.button{
 color:#693e0a !important;
 border:1px solid #bea280 !important; 
 background-color: #e38d27;
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
 background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}

.orange.button:hover{
 background-color:#ec9732;
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
 background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

.gray.button{
 color:#525252 !important;
 border:1px solid #a5a5a5 !important; 
 background-color: #a9adb1;
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}

.gray.button:hover{
 background-color:#b6bbc0;
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

Đối với Blogspot:

Bước 1: Vào Template > Mẫu > Chỉnh sửa HTML và tìm kiếm dòng sau:
<b:skin><![
Bước 2: Thêm CSS vào trong <b:skin> ... </b:skin> của bạn:
.button{
 font:15px Calibri, Arial, sans-serif;

 /* Đổ bóng chữ trong button */
 text-shadow:1px 1px 0 rgba(255,255,255,0.4);
 
 /* Xóa gạch chân cho đường link */
 text-decoration:none !important;
 white-space:nowrap;
 
 display:inline-block;
 vertical-align:baseline;
 position:relative;
 cursor:pointer;
 padding:10px 20px;
 
 background-repeat:no-repeat;
 background-position:bottom left;
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png');
 background-position:bottom left, top right, 0 0, 0 0;
 background-clip:border-box;
 
 /* Bo tròn góc với 8px */
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
 
 /* Tạo 1px với màu sáng để làm nổi bật button */
 -moz-box-shadow:0 0 1px #fff inset;
 -webkit-box-shadow:0 0 1px #fff inset;
 box-shadow:0 0 1px #fff inset;
 
 /* Tạo các hình động với nền bằng CSS3 */
 /* Chỉ hỗ trợ hiển thị trên trình duyệt Safari/Chrome */
 
 -webkit-transition:background-position 1s;
 -moz-transition:background-position 1s;
 transition:background-position 1s;
}

.button:hover{
 background-position:top left;
 background-position:top left, bottom right, 0 0, 0 0;
}

.button:active{
 /* Di chuyển button 1px xuống phía dưới khi nhấp chuột vào */
 bottom:-1px;
}

/* 3 size cho button */

.button.big  { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}

/* Một nút tròn hơn */

.button.rounded{
 -moz-border-radius:4em;
 -webkit-border-radius:4em;
 border-radius:4em;
}

/* BlueButton */

.blue.button {
  color:#0f4b6d !important;
  border:1px solid #84acc3 !important;
  background-color:#48b5f2;
  background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),-moz-radial-gradient( center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb);
  background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1)),to(rgba(89,208,244,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#4fbbf7),to(#3faeeb));
}

.blue.button:hover {
  background-color:#63c7fe;
  background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),-moz-radial-gradient( center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7);
  background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1)),to(rgba(109,217,250,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#63c7fe),to(#58bef7));
}

/* Green Button */

.green.button{
 color:#345903 !important;
 border:1px solid #96a37b !important; 
 background-color: #79be1e;
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}

.green.button:hover{
 background-color:#89d228;
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}

/* Orange Button */

.orange.button{
 color:#693e0a !important;
 border:1px solid #bea280 !important; 
 background-color: #e38d27;
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
 background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}

.orange.button:hover{
 background-color:#ec9732;
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
 background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

.gray.button{
 color:#525252 !important;
 border:1px solid #a5a5a5 !important; 
 background-color: #a9adb1;
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
 background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}

.gray.button:hover{
 background-color:#b6bbc0;
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
 background-image:url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), url('http://1.bp.blogspot.com/-uJAdc9_2u0Q/U_Wt8f3MiUI/AAAAAAAAAVk/aak4g00C3NE/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}


Bước 3: Vào Bài đăng mới > chuyển sang chế độ HTML và thêm class vào link button:
<a href="#" class="button big blue">Big Button</a>
Trong đó button là bắt buộc phải có trong thẻ class HTML. Big là size của button và blu là màu sắc của button


Các nút này là hoàn toàn dựa trên CSS và tích hợp chúng là cực kỳ đơn giản - chỉ cần thả các nút thư mục ở đâu đó trong bài viết của bạn. Bạn có thể tạo ra màu sắc và hình dạng của riêng bạn bằng cách thay đổi các tập tin CSS.

Bài viết được tham khảo tại freshdesignweb.com

Chúc các bạn thành công!
Jakub BB
Tạo button với hiệu ứng bong bóng lạ và đẹp bằng CSS3 cho webs, blogs của bạn 4.5 5 BDL Hôm nay JBB sẽ giới thiệu đến các bạn button với hoạt ảnh bong bóng và những hiệu ứng đẹp, lạ mắt cho website, blog của bạn. Tạo button với ...
Bài đăng Mới hơn Bài đăng Cũ hơn
BDL

Bùi Đình Luyện

Hi! Hiện tại thì mình đang quản lý site sunf5.net và một số sub-domain đều design từ blogspot. Mình yêu thích CNTT và muốn chia sẻ những gì mình biết đến với mọi người. Hãy comment dưới mỗi bài viết để chúng ta có thể hiểu nhau hơn.

Nickname: Sun Shine - (Jakub BB)

Website: http://www.sunf5.net/

Social Links:

Bài viết Liên quan

Nhận xét

Đăng nhận xét