小编ton*_*407的帖子

我正在尝试为按钮实现此效果:

我一直在与它争斗几个小时,我能想出的最好的是CodePen.

<a href="#" class="btn-wrap">
  <span class="btn btn-primary">See the Proof</span>
</a>

.btn {
    border: 0;
    border-radius: 0;
    font-weight: 300;
    font-size: 20px;
    text-transform: uppercase;
}
.btn-primary {
    position: relative;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
}
.btn-primary:before, .btn-primary:after {
    position: absolute;
    content: '';
    right: -20px;
    width: 10px;
    height: 50%;
    background: inherit;
}
.btn-primary:before {
  top: 0;
  transform: skewX(30deg);
}
.btn-primary:after {
  bottom: 0;
  transform: skewX(-30deg);
}
.btn-wrap {
    position: relative;
    display: inline-block;
} …

我正在尝试使用jQuery附加链接,但它无法正常工作.这是我的代码.

$(document).ready(function() {
  $( ".class" ).append( "<p><a href="http://www.google.com">Google</a></p>" );
});