Thiết kế button đơn giản với CSS

Cập nhật: Lượt xem: 603 [ Css ]

Hôm nay mình sẽ giới thiệu cho các bạn thêm một mẫu button đẹp để các bạn có thể chèn vào trong trang web hay blog của các bạn. Ngoài ra, các bạn còn có thể tự sáng tạo thêm dựa vào đoạn code css định dạng mà mình chia sẻ trong bài viết này.

Thiết kế button đơn giản với CSS

HTML

Đầu tiên các bạn chèn đoạn HTML sau đây vào nơi mà các bạn muốn hiển thị button

<div class="button_container">
    A simple pure CSS hover effect
<button class="btn"><span>Hover me!</span></button>
</div>

CSS

Sau đó các bạn chỉ việc chèn đoạn css sau

@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
 
body {
    margin: 0;
    height: 100%;
    background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
    background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
 
.button_container {
    position: absolute;
  left: 0;
  right: 0;
  top: 30%;
}
 
.button_container p {
    font-family: 'Amatic SC', cursive;
    text-align: center;
    font-size: 35px;
}
 
.btn {
  border: none;
  display: block;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  outline: none;
  overflow: hidden;
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  background-color: #222;
  padding: 17px 60px;
  margin: 0 auto;
  box-shadow: 0 5px 15px rgba(0,0,0,0.20);
}
 
.btn span {
  position: relative; 
  z-index: 1;
}
 
.btn:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 490%;
  width: 140%;
  background: #78c7d2;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
  transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
 
.btn:hover:after {
  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
  transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

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