Từng bước tạo nút bấm mạng xã hội bằng CSS3

CSS3 giúp các nhà thiết kế web có khả năng tạo ra các nút bấm (buttons) vô cùng đẹp mắt, hôm nay mình sẽ chia sẻ với các bạn 2 thủ thuật trang trí cho các button trong web của bạn trở nên đẹp rạng ngời mà không cần phải dùng đến photoshop.

1   Inset Buttons |  xem demo
Trước tiên chúng ta sẽ tạo ra các phần tử nút bấm (button) đại diện cho các mạng xã hội như facebook, twitter, … bằng HTML. Các bạn chép đoạn code sau :

<div>
     <ul>
         <li>
             <a href="mailto:ansarob@gmail.com">
             <img src="images/gmail_16.png" alt="gmail icon" />
             <span>E-Mail</span>
             </a>
         </li>

         <li>
             <a href="http://linkedin.com" title="My LinkedIn Page">
             <img src="images/linkedin_16.png" alt="LinkedIn icon" />
              <span>LinkedIn</span>
             </a>
          </li>

          <li>
             <a href="http://facebook.com" title="My Facebook Page">
             <img src="images/facebook_16.png" alt="Facebook icon" />
             <span>Facebook</span>
             </a>
         </li>

        <li>
           <a href="http://twitter.com" title="My Twitter Page">
           <img src="images/twitter_16.png" alt="Twitter icon" />
           <span>Twitter</span>
            </a>
        </li>

         <li>
            <a href="http://flickr.com" title="My Flickr Page">
            <img src="images/flickr_16.png" alt="Flickr icon" />
            <span>Flickr</span>
            </a>
         </li>
    </ul>
</div>

Bây giờ là lúc chúng ta sẽ trang trí cho các button này, các bạn chép đoạn css sau :

.inset {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 14px;
list-style-type: none;
margin: 10px 0 0 10px;
}

.inset ul { list-style-type: none; display: block; }

.inset li {
float: left;
height: 30px;
margin: 0 8px 7px 0;
}

.inset li a {
background-color: gray;
color: #424242;
float: left;
font-size: 16px;
font-weight: bold;
height: 24px;
padding-left: 27px;
padding-top: 6px;
position: relative;
text-decoration: none;
border: 1px solid #bfc1c6;
}

.inset li a:hover {
border: 1px solid #b4b7bb;
}

.inset li a img {
height: 16px;
left: 7px;
margin-right: 7px;
position: absolute;
top: 7px;
awidth: 16px;
border: none;
}

.inset li a span {
display: block;
height: 22px;
padding-right: 7px;
overflow: hidden;
/* awidth: 70px; Uncomment this to add a fixed awidth */
}
span.site { font-size: 14px; line-height: 20px; }

Kết quả mà chúng ta sẽ nhận được như thế này :

Vậy là chúng ta đã có được các button , tuy nhiên chúng ta cần trang trí lại thêm chút , bước này chúng ta sẽ bo góc cho các button bằng thuộc tính border-radius , ở đây chúng ta sẽ dùng thêm -moz- cho các trình duyệt như  Firefox, SeaMonkey, và Flock, và -webkit- cho các trình duyệt như Safari và Chrome. Và sau đây là đoạn csss làm việc này , các bạn đặt nó ở bên trong thuộc tính .inset li a

/* Mozilla  */
-moz-border-radius: 5px;
/* Safari và Chrome  */
-webkit-border-radius: 5px;
/*  Opera và IE9 */
border-radius: 5px;

Kết quả nhận được sẽ là :

Tạo màu  Gradients bằng CSS3
Trong bước này chúng ta sẽ đổ màu gradients giống như trong photoshop , chỉ khác là bằng css3 với thuộc tính linear-gradient() và gradient(),  và lần này chúng ta vẫn tiếp tục sử dụng tiền tố (-moz-) và (-webkit-) cho từng loại trình duyệt. Chú ý là chúng ta vấn đặt đoạn css sau vào .inset li a selector

/* Mozilla browsers that use Gecko layout engine */
background: -moz-linear-gradient(#a5a7aa, #bec1c5 1%, #d8dbdf 10%, #d8dbdf);
/* Safari and Chrome that use WebKit layout engine */
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #a5a7aa),color-stop(.01, #bec1c5),color-stop(.10, #d8dbdf),color-stop(1, #d8dbdf));

Kết quả nhận được sẽ thế này :

Chúng ta tiếp tục tạo gradient cho button, nhưng lần này thì chúng ta sẽ tạo ở phần hover (tức là khi trỏ chuột vào button, thì button sẽ chuyển sang màu khác)
Các bạn copy đoạn code sau vào phần inset li a:hover

background: -moz-linear-gradient(#9c9fa2, #b4b7bb 1%, #cdd0d5 10%, #cdd0d5);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9c9fa2),color-stop(.01, #b4b7bb),color-stop(.10, #cdd0d5),color-stop(1, #cdd0d5));

Và button sẽ thay đổi background như sau khi chúng ta trỏ chuột tới:

2 Outset button | xem demo

Thủ thuật thứ 2 này tương tự như là inset button, tuy nhiên mỗi nút bấm trong thủ thuật này là một màu riêng biệt, như hình bên dưới:

Các bạn tham khảo đoạn HTML và CSS3 như sau :

HTML

<div class="outset-colored">
  <ul>
    <li>
      <a href="mailto:ansarob@gmail.com" title="My E-Mail" class="email">
        <img src="images/gmail_white.png" alt="gmail icon" />
        <span class="site">E-Mail</span>
      </a>
    </li>
    <li>
      <a href="http://linkedin.com" title="My LinkedIn Page" class="linkedin">
        <img src="images/linkedin_white.png" alt="LinkedIn icon" />
        <span class="site">LinkedIn</span>
      </a>
    </li>
    <li>
      <a href="http://facebook.com" title="My Facebook Page" class="facebook">
        <img src="images/facebook_white.png" alt="Facebook icon" />
        <span class="site">Facebook</span>
      </a>
    </li>
    <li>
      <a href="http://twitter.com" title="My Twitter Page" class="twitter">
        <img src="images/twitter_white.png" alt="Twitter icon" />
        <span class="site">Twitter</span>
      </a>
    </li>
    <li>
      <a href="http://flickr.com" title="My Flickr Page" class="flickr">
        <img src="images/flickr_white.png" alt="Flickr icon" />
        <span class="site">Flickr</span>
      </a>
    </li>
  </ul>
</div>

CSS

  /* COLORED OUTSET BUTTONS */

.outset-colored {
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 14px;
  list-style-type: none;
  margin: 10px 0 0 10px;
}

.outset-colored ul { list-style-type: none; display: block; }

.outset-colored li {
  float: left;
  height: 30px;
  margin: 0 8px 7px 0;
}

.outset-colored li a {
  color: #424242;
  float: left;
  font-size: 16px;
  font-weight: bold;
  height: 24px;
  padding-left: 27px;
  padding-top: 6px;
  position: relative;
  text-decoration: none;
  border: 1px solid #bfc1c6;
  border-radius: 5px;
  background-color: #D8D9DD;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

/* EMAIL */
.outset-colored li a.email {
  background: -moz-linear-gradient(#ff6666, #cc0000 10%, #c40202);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff6666),color-stop(.10, #cc0000),color-stop(1, #c40202));
  color: #f3f3f3;
  border: 1px solid #c40202;
}

.outset-colored li a:hover.email {
  background: -moz-linear-gradient(#c40202, #cc0000 1%, #e03434 10%, #e03434);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c40202),color-stop(.01, #cc0000),color-stop(.10, #e03434),color-stop(1, #e03434));
}

/* LINKEDIN */
.outset-colored li a.linkedin {
  background: -moz-linear-gradient(#7cd0fb, #38a5dc 10%, #2c83ae);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7cd0fb),color-stop(.10, #38a5dc),color-stop(1, #2c83ae));
  color: #f3f3f3;
  border: 1px solid #2c83ae;
}

.outset-colored li a:hover.linkedin {
  background: -moz-linear-gradient(#2c83ae, #38a5dc 1%, #41b9f6 10%, #41b9f6);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2c83ae),color-stop(.01, #38a5dc),color-stop(.10, #41b9f6),color-stop(1, #41b9f6));
}

/* FACEBOOK */
.outset-colored li a.facebook {
  background: -moz-linear-gradient(#7aa3f7, #4c72c3 10%, #3b5998);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7aa3f7),color-stop(.10, #4c72c3),color-stop(1, #3b5998));
  color: #f3f3f3;
  border: 1px solid #3b5998;
}

.outset-colored li a:hover.facebook {
  background: -moz-linear-gradient(#3b5998, #4c72c3 1%, #5c8aea 10%, #5c8aea);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3b5998),color-stop(.01, #4c72c3),color-stop(.10, #5c8aea),color-stop(1, #5c8aea));
}

/* TWITTER */
.outset-colored li a.twitter {
  background: -moz-linear-gradient(#8ae0fd, #24bce6 10%, #1e9ec1);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #8ae0fd),color-stop(.10, #24bce6),color-stop(1, #1e9ec1));
  color: #f3f3f3;
  border: 1px solid #1e9ec1;
}

.outset-colored li a:hover.twitter {
  background: -moz-linear-gradient(#1e9ec1, #24bce6 1%, #33ccff 10%, #33ccff);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #24bce6),color-stop(.01, #33ccff),color-stop(.10, #33ccff),color-stop(1, #33ccff));
}

/* FLICKR */
.outset-colored li a.flickr {
  background: -moz-linear-gradient(#fc75ba, #e10374 10%, #c10263);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fc75ba),color-stop(.10, #e10374),color-stop(1, #c10263));
  color: #f3f3f3;
  border: 1px solid #c10263;
}

.outset-colored li a:hover.flickr {
  background: -moz-linear-gradient(#c10263, #e10374 1%, #ff0283 10%, #ff0283);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c10263),color-stop(.01, #e10374),color-stop(.10, #ff0283),color-stop(1, #ff0283));
}

.outset-colored li a img {
  height: 16px;
  left: 7px;
  margin-right: 7px;
  position: absolute;
  top: 7px;
  awidth: 16px;
   border: none;
}

.outset-colored li a span {
  display: block;
  height: 22px;
  padding-right: 7px;
  overflow: hidden;
  /*awidth: 70px; Add a awidth here if you want all the buttons to be the same size.*/
}

span.site { font-size: 14px; line-height: 20px; }

Hy vọng với bài viết này sẽ giúp cho các bạn có thêm kinh nghiệm để thiết kế những button đẹp mắt cho web hay blog của mình.
Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster