一个创造性的按钮组，使用jQuery和CSS3转换和转换将按钮变形为内联模式。灵感来自材料设计。

它不仅能增强用户的视觉体验，还能在与网站互动时改善用户的体验。

如何使用它:

1.创建一个包含两个操作按钮的按钮组，如下所示：

<div class="buttons-ctn">
  <a href="" class="button button--left"><span>Left</span></a>
  <a href="" class="button button--right"><span>Right</span></a>
</div>

2.为每个按钮创建模态。

<div class="button__content button__content--left">
  <h2>You chose left!</h2>
  <a href="">Signup for nothing here</a>
</div>
<div class="button__content button__content--right">
  <h2>You chose right!</h2>
  <a href="">Signup for nothing here</a>
</div>

3.必要的CSS样式。

.buttons-ctn {
  will-change: transform;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -140px;
  margin-top: -30px;
  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;
  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%;
  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;
  }
}

4.在文档末尾加载最新的jQuery库。

<script src="/path/to/cdn/jquery.slim.min.js"></script>

5.激活按钮模态的主脚本。

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();
 
    // content box stuff
    var thatContent = $('.button__content').eq(thatIndex);
    var thatContentW = thatContent.innerWidth();
    var thatContentH = thatContent.innerHeight();
 
    // transform values for button
    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();

预览截图

带jQuery和CSS3 变形按钮模式