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

23/02/2017

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.

thiet-ke-button-don-gian-chi-voi-css

Xem Demo | Download

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 !

Chuyên Mục:

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

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !