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

Bài viết liên quan:

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!

Phan Niệm

Không muốn hoặc không thích, không tồn tại hoặc không thể! Cám ơn các bạn đã ghé thăm, chúc các bạn có những phút giây thoải mái và bổ ích trên blog của mình! Thanks for... Xem thêm về tôi

  1. Trả lời
    1. ngon sao để mặt buồn vậy e?

      Xóa
    2. máy cái này ăn đc hay sao mà ngon nhỉ???

      Xóa
    3. ông Huy kì ghê nha -,-

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

    Trả lờiXóa
    Trả lời
    1. haha chỉ quen thuộc mới hiểu :v

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

    Trả lờiXóa
  4. 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
  5. 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
    Trả lời
    1. nó đổ bóng chứ lem màu gì đâu em?

      Xóa
  6. 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
  7. Button chất quá a Niệm <3

    Trả lờiXóa