Thiết kế button đơn giản chỉ với 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.

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%;
  awidth: 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: Css

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