Bộ sưu tập hiệu ứng hover cho button cực đẹp với CSS3

Trong quá trình thiết kế web, chắc hẳn là các bạn sẽ dùng tới button rất nhiều vào trong trang web hay blog của mình. Hôm nay, mình xin chia sẻ cho các bạn thêm một vài button với hiệu ứng hover cực đẹp, các bạn có thể ứng dụng vào trong các dự án của mình.

Xem Demo | Download

HTML

Đầu tiên, chúng ta cần có khung chuẩn html như sau :

<section class="buttons">
  <div class="container">
    <h1>Button Hover Effects</h1>
    <a href="https://twitter.com/Dave_Conner" class="btn btn-1">
      <svg>
        <rect x="0" y="0" fill="none" awidth="100%" height="100%"/>
      </svg>
     Hover
    </a>
     

    <a href="https://twitter.com/Dave_Conner" class="btn btn-2">Hover</a>
     

    <a href="https://twitter.com/Dave_Conner" class="btn btn-3">Hover</a>
     

    <a href="https://twitter.com/Dave_Conner" class="btn btn-4"><span>Hover</span></a>
     

    <a href="https://twitter.com/Dave_Conner" class="btn btn-5">Hover</a>
     

    <p>Follow on <a href="http://www.twitter.com/thuthuatweb" target="_blank">Twitter</a></p>
  </div>

</section>

CSS

Và sau đây là toàn bộ đoạn css giúp các bạn tạo được hiệu ứng button :

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,900);
* {
  box-sizing: inherit;
  transition-property: all;
  transition-duration: .6s;
  transition-timing-function: ease;
}

html,
body {
  box-sizing: border-box;
  height: 100%;
  awidth: 100%;
}

body {
  background: #E1332D;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.buttons {
  display: table;
  height: 100%;
  awidth: 100%;
}

.container {
  display: table-cell;
  padding: 1em;
  text-align: center;
  vertical-align: middle;
}

h1 {
  color: #fff;
  font-size: 1.25em;
  font-weight: 900;
  margin: 0 0 2em;
}
@media (min-awidth: 450px) {
  h1 {
    font-size: 1.75em;
  }
}
@media (min-awidth: 760px) {
  h1 {
    font-size: 3.25em;
  }
}
@media (min-awidth: 900px) {
  h1 {
    font-size: 5.25em;
    margin: 0 0 1em;
  }
}

p {
  color: #fff;
  font-size: 12px;
}
@media (min-awidth: 600px) {
  p {
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0);
    top: 90%;
  }
}
@media (max-height: 500px) {
  p {
    left: 0;
    position: relative;
    top: 0;
    transform: translate(0, 0);
  }
}
p a {
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid;
  color: #fff;
  line-height: 1.4;
  padding: .25em;
  text-decoration: none;
}
p a:hover {
  background: white;
  color: #E1332D;
}

.btn {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 auto 2em;
  max-awidth: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  awidth: 100%;
}
@media (min-awidth: 400px) {
  .btn {
    display: inline-block;
    margin-right: 2.5em;
  }
  .btn:nth-of-type(even) {
    margin-right: 0;
  }
}
@media (min-awidth: 600px) {
  .btn:nth-of-type(even) {
    margin-right: 2.5em;
  }
  .btn:nth-of-type(5) {
    margin-right: 0;
  }
}
.btn:hover {
  text-decoration: none;
}

.btn-1 {
  background: #e02c26;
  font-weight: 100;
}
.btn-1 svg {
  height: 45px;
  left: 0;
  position: absolute;
  top: 0;
  awidth: 100%;
}
.btn-1 rect {
  fill: none;
  stroke: #fff;
  stroke-awidth: 1;
  stroke-dasharray: 422, 0;
}

.btn-1:hover {
  background: rgba(225, 51, 45, 0);
  font-weight: 900;
  letter-spacing: 1px;
}
.btn-1:hover rect {
  stroke-awidth: 5;
  stroke-dasharray: 15, 310;
  stroke-dashoffset: 48;
  transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-2 {
  letter-spacing: 0;
}

.btn-2:hover,
.btn-2:active {
  letter-spacing: 5px;
}

.btn-2:after,
.btn-2:before {
  backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0);
  bottom: 0px;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  transition: all 280ms ease-in-out;
  awidth: 0;
}

.btn-2:hover:after,
.btn-2:hover:before {
  backface-visibility: hidden;
  border-color: #fff;
  transition: awidth 350ms ease-in-out;
  awidth: 70%;
}

.btn-2:hover:before {
  bottom: auto;
  top: 0;
  awidth: 70%;
}

.btn-3 {
  background: #e3403a;
  border: 1px solid #da251f;
  box-shadow: 0px 2px 0 #d6251f, 2px 4px 6px #e02a24;
  font-weight: 900;
  letter-spacing: 1px;
  transition: all 150ms linear;
}

.btn-3:hover {
  background: #e02c26;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
  color: #ec817d;
  text-decoration: none;
  text-shadow: -1px -1px 0 #c2211c;
  transition: all 250ms linear;
}

.btn-4 {
  border: 1px solid;
  overflow: hidden;
  position: relative;
}
.btn-4 span {
  z-index: 20;
}
.btn-4:after {
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: .2;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  awidth: 50px;
  z-index: -10;
}

.btn-4:hover:after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-5 {
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-5:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388;
}

Các bạn thấy sao ? Rất đẹp đúng không nào, button mà mình giới thiệu cho các bạn trong bài viết này chỉ là phụ, mục đích chính là muốn các bạn hiểu và sử dụng rõ CSS3 cho các dự án thiết kế web của các bạn sau này.

Chúc các bạn thành công !

Chuyên Mục: Css

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