Animated plus button

by Ashish Kasama

HTML

<div class="omnibutton">
<a class="omnibutton-button" data-reactid=".5.3.0:$button"><svg class="icon plusIcon omnibutton-plusIcon" viewBox="0 0 32 32" data-reactid=".5.3.0:$button.0"><polygon points="28,14 18,14 18,4 14,4 14,14 4,14 4,18 14,18 14,28 18,28 18,18 28,18" data-reactid=".5.3.0:$button.0.0"></polygon></svg></a>
</div>

CSS

.omnibutton {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 15px;
    position: relative;
}
.omnibutton-plusIcon {
    fill: #fff;
}
.icon {
    height: 16px;
    width: 16px;
}

.omnibutton-button {
  cursor:pointer;
    background: -webkit-linear-gradient(bottom left, #FC636B, #FF6D92 35%, #FFB900 100%);
    background: linear-gradient(to top right, #FC636B, #FF6D92 35%, #FFB900 100%);
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 12px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 24px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 24px;
    z-index: 0;
}

.omnibutton-button::after {
    background: -webkit-linear-gradient(bottom left, #FC636B, #FF6D92 35%, #FFB900 100%);
    background: linear-gradient(to top right, #FC636B, #FF6D92 35%, #FFB900 100%);
    border-radius: 16px;
    bottom: 0;
    content: "";
    height: 24px;
    left: 0;
    margin: auto;
    opacity: .5;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: .2s height,.2s width;
    transition: .2s height,.2s width;
    width: 24px;
    z-index: -1;
}
.omnibutton-button:hover::after, .omnibutton-button:active::after {
    height: 32px;
    width: 32px;
}