NIỆM STYLE BLOGGER ™
  • Bảo trợ bởi
  • Home
  • About
  • Contact
  • Policy
  • Sitemap

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.

tao-hieu-ung-button-chuyen-nghiep-bang-css-cho-blogspot

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



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!

Đăng nhận xét

29 Nhận xét

  1. Hiệu ứng quá ngầu. Có mùi tinh tế của Niệm Style :)

    Trả lờiXóa
  2. Trên codepen hẳn một mả đó anh, trên đó cũng nhiều cái đẹp lắm

    Trả lờiXóa
  3. Button thứ 3 đâu mất rồi ô ơi :))

    Trả lờiXóa
    Trả lời
    1. đương nhiên là xóa đi rồi :v

      Xóa
    2. thế cái background cũng phải xóa cái thứ 3 đi chứ a :))))

      Xóa
  4. Klq síu nha a Niệm. Cái hình con trỏ chuột anh có để ý nó bị lem màu không???

    Trả lờiXóa
  5. Blog anh cỡ này màu mè qtqđ :)

    Trả lờiXóa
    Trả lời
    1. vậy là bớt màu lắm rồi đó em, chứ mấy hôm trước còn dữ hơn nữa à :v

      Xóa
  6. Button chất quá a Niệm <3

    Trả lờiXóa