Code Button Chất

DEMO: http://codepen.io/Beohoavinh/full/apxNyM/

Chèn code bên dưới vào nơi hiển thị:

<div class="buttons-ctn">
	  <a href="#" class="button button--left"><span>Trái</span></a>
	  <a href="#" class="button button--right"><span>Phải</span></a>
	</div>
	<div class="button__content button__content--left">
	  <h2>Bạn Chọn Trái!</h2>
	  <a href="#">Chả Có Gì Ở Đây Hết :)</a>
	</div>
	<div class="button__content button__content--right">
	  <h2>Bạn Chọn Phải!</h2>
	  <a href="#">Chả Có Gì Ở Đây Hết :)</a>
	</div>

	<main>
	  	<header class="htmleaf-header">
			<h1>Chia Sẻ 78</h1>
			<div class="htmleaf-links">
			</div>
		</header>
	</main>
	
	<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>

Chèn tiếp CSS sau:

.buttons-ctn {
  will-change: transform;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -140px;
  margin-top: -30px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.button {
  will-change: transform;
  position: relative;
  float: left;
  display: inline-block;
  padding: 20px;
  width: 140px;
  text-align: center;
  line-height: normal;
  -webkit-transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.button--left {
  background: #141414;
  color: white;
}
.button--right {
  background: #ebebeb;
  color: #141414;
}
.button--active {
  cursor: default;
}
.button--active span {
  opacity: 0;
}

.button__content {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 60px 20px;
  text-align: center;
  width: 600px;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
  color: white;
}
.button__content--left {
  color: white;
}
.button__content--left a {
  color: #141414;
  background: white;
}
.button__content--right {
  color: #141414;
}
.button__content--right a {
  color: white;
  background: #141414;
}
.button__content--active {
  opacity: 1;
  visibility: visible;
}
.button__content a {
  display: inline-block;
  padding: 10px 20px;
}
.button__content h2 {
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 300;
}
@media (max-width: 650px) {
  .button__content {
    width: 295px;
  }
}

main {
  color: white;
  text-align: center;
}
main h1 {
  font-weight: 300;
  margin-bottom: 8px;
  margin-top: 24px;
}
main p {
  margin-top: 0;
}
main p a {
  font-size: 20px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  color: rgba(0, 0, 0, 0.6);
}

Cuối cùng là chèn JS nữa là xong:

<script>
	var button = $('.button');
	var content = $('.button__content');
	var win = $(window);
	var expand = function () {
	    if (button.hasClass('button--active')) {
	        return false;
	    } else {
	        var W = win.width();
	        var xc = W / 2;
	        var that = $(this);
	        var thatWidth = that.innerWidth() / 2;
	        var thatOffset = that.offset();
	        var thatIndex = that.index();
	        var other;
	        if (!that.next().is('.button')) {
	            other = that.prev();
	        } else {
	            other = that.next();
	        }
	        var otherWidth = other.innerWidth() / 2;
	        var otherOffset = other.offset();
	        var thatContent = $('.button__content').eq(thatIndex);
	        var thatContentW = thatContent.innerWidth();
	        var thatContentH = thatContent.innerHeight();
	        var thatTransX = xc - thatOffset.left - thatWidth;
	        var otherTransX = xc - otherOffset.left - otherWidth;
	        var thatScaleX = thatContentW / that.innerWidth();
	        var thatScaleY = thatContentH / that.innerHeight();
	        that.css({
	            'z-index': '2',
	            'transform': 'translateX(' + thatTransX + 'px)'
	        });
	        other.css({
	            'z-index': '0',
	            'opacity': '0',
	            'transition-delay': '0.05s',
	            'transform': 'translateX(' + otherTransX + 'px)'
	        });
	        that.on('transitionend webkitTransitionEnd', function () {
	            that.css({ 'transform': 'translateX(' + thatTransX + 'px) scale(' + thatScaleX + ',' + thatScaleY + ')' });
	            that.addClass('button--active');
	            thatContent.addClass('button__content--active');
	            thatContent.css('transition', 'all 1s 0.1s cubic-bezier(0.23, 1, 0.32, 1)');
	            that.off('transitionend webkitTransitionEnd');
	        });
	        return false;
	    }
	};
	var hide = function (e) {
	    var target = $(e.target);
	    if (target.is(content)) {
	        return;
	    } else {
	        button.removeAttr('style').removeClass('button--active');
	        content.removeClass('button__content--active').css('transition', 'all 0.2s 0 cubic-bezier(0.23, 1, 0.32, 1)');
	    }
	};
	var bindActions = function () {
	    button.on('click', expand);
	    win.on('click', hide);
	};
	var init = function () {
	    bindActions();
	};
	init();
	</script>

- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh