Tạo hiệu ứng button chuyên nghiệp hoàn toàn bằng css cho blogspot

Chào mọi người! cũng đã lâu rồi cũng chưa có bài gì mới cho mọi người. Hôm nay lại hăng máu đam mê lên nên kiếm cái hiệu ứng button đẹp này chia sẽ cho mọi người.

Hiệu ứng button này có gì đặt biệt:

• Đơn giản, dễ nhìn, thích mắt.
• Hoàn toàn làm bằng CSS, ko có Js nên sẽ không ảnh hưởng đến tốc độ blog.
• Giúp chúng ta thể hiện được cá tính của mình trên từng bài viết: tinh tế :v

Hướng dẫn cách làm button

Bước 1: Các bạn chèn CSS sau trên thẻ ]]></b:skin>

#personal {
  color:white;
  text-decoration:none;
  position:absolute;
  bottom:15px;
  right:2%;
}
.spot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.svg-wrapper {
  margin-top: 0;
  position: relative;
  width: 150px;
  height: 40px;
  display: inline-block;
  border-radius: 3px;
  margin-left: 5px;
  margin-right: 5px
}
#shape {
  stroke-width: 6px;
  fill: transparent;
  stroke: #009FFD;
  stroke-dasharray: 85 400;
  stroke-dashoffset: -220;
  transition: 1s all ease;
}
#text {
  margin-top: -35px;
  text-align: center;
}
#text a {
  color: #000;
  text-decoration: none;
  font-weight: 100;
  font-size: 1.1em;
}
.svg-wrapper:hover #shape {
  stroke-dasharray: 50 0;
  stroke-width: 3px;
  stroke-dashoffset: 0;
  stroke: #06D6A0;
}

Bước 2: Chèn HTML hiển thị button vào bài viết (hoặc là bất cứ đâu bạn thích)

<!--start button -->
    <div class="svg-wrapper">
      <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
        <rect id="shape" height="40" width="150" />
        <div id="text">
          <a href="/"><span class="spot"></span>Demo</a>
        </div>
      </svg>
    </div>
    <!--Next button -->
    <div class="svg-wrapper">
      <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
        <rect id="shape" height="40" width="150" />
        <div id="text">
          <a href="/"><span class="spot"></span>Download</a>
        </div>
      </svg>
    </div>
 <!--End button -->

Xem DEMO button

Demo

Download

Các bạn có thể chỉnh sữa màu sắc ở CSS theo ý thích của các bạn nhé!

Như vậy là khá đơn giản để có một button đẹp và chuyên nghiệp để sử dụng đúng không nào. Hy vọng bài viết sẽ có ích cho các bạn. Chúc các bạn thành công!
Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam