Animasyonlu Butonları nasıl yapabilirim?

<div id="alertHolder" class="{altPosition} {horzAnchor} {vertAnchor}">
  <div class="holder altHolder">
    <div id="altAbove" class="alt">
      <div class="bg"></div>
      <div class="altText">{altTextArea}</div>
    </div>
  </div>
  <div class="holder">
    <div id="main">
      <div class="bg"></div>
      <div id="mainText"><span>{mainTextArea}</span></div>
    </div>
  </div>
  <div class="holder">
    <div id="altBelow" class="alt">
      <div class="bg"></div>
      <div class="altText">{altTextArea}</div>
    </div>
  </div>
  <div id="messageHolder">
    <div id="alert-user-message"></div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css?family={font}");

:root {
/*   Global variables */
  --widthType: inline-block;
  --padding: {vertPadding}px {horzPadding}px;
  --textAlign: {textAlign};
  --font: {font};
  --xOffset: {xOffset}px;
  --yOffset: {yOffset}px;
 
/*   Main Text variables */
  --mainColor: {mainColor};
  --mainFS: {mainFS}px;
  --mainFW: {mainFW};
  --mainBg: {mainBg};
  --mainTransform: {mainTransform};
  --mainBgOpacity: calc({mainBgOpacity} * .01);  
 
/*   Alt Text variables */
  --altColor: {altColor};
  --altFS: {altFS}px;
  --altFW: {altFW};
  --altBg: {altBg};
  --altTransform: {mainTransform};
  --altBgOpacity: calc({altBgOpacity} * .01);
}

html,body {
  padding: 0;
  margin: 0;
  font-family: var(--font);
  text-align: var(--textAlign);
}

#alertHolder {
  position: absolute;
  font-size: 0;
  opacity: 0;
}

.left {
  left: var(--xOffset);
}
.right {
  right: var(--xOffset);
}
.top {
  top: var(--yOffset);
}
.bottom {
  bottom: var(--yOffset);
}

.center {
  left: 50%;
  transform: translateX(-50%);
}

#main, .alt {
  padding: var(--padding);
  display: var(--widthType);
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

#mainText img {
  height: var(--mainFS);
  width: auto;
  margin: 0;
  padding: 0;
  float: left;
}

#main {
  color: var(--mainColor);
  font-size: var(--mainFS);
  line-height: var(--mainFS);
  height: var(--mainFS);
  font-weight: var(--mainFW);
  transform-origin: var(--mainTransform);
  border-top: {topBH}px solid {borderColor};
  border-bottom: {botBH}px solid {borderColor};
}

.alt {
  color: var(--altColor);
  font-size: var(--altFS);
  line-height: var(--altFS);
  height: var(--altFS);
  font-weight: var(--altFW);
  transform-origin: var(--altTransform);
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#main .bg {
  background: var(--mainBg);
  opacity: var(--mainBgOpacity);
}

.alt .bg {
  background: var(--altBg);
  opacity: var(--altBgOpacity);
}

#mainText, .altText {
  z-index: 999;
  position: relative;
}

.above #altBelow {
  display: none;
  visibility: hidden;
}

.below #altAbove {
  display: none;
  visibility: hidden;
}

#messageHolder {
  color: #FFF;
  text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 6px #000;
  position: relative;
  top: 10px;
  padding: var(--padding);
  left: 0;
  max-width: 600px;
  font-size: 16px;
  word-wrap: break-word;
}

(function () {
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js", function() {
sameWidth = "{matchWidth}";

var mainWidth = $("#main").width();
var altWidth = $(".alt:visible").width();
 
if(sameWidth == "yes"){
  if(altWidth < mainWidth){
    $(".alt:visible").width(mainWidth);
  } else {
    $("#main").width(altWidth);
  }
} else {
  if(mainWidth < altWidth){
  $("#main").width(altWidth);
  }
}

var tOrigin = "{mainTransform}",
    scaleSizeX = 0,
    scaleSizeY = 0,
    textOX = 0,
    textOY = 0;


if (tOrigin == "left top") {
  textOX = -100;
} else if (tOrigin == "center top") {
  scaleSizeX = 1;
  textOY = -100;
} else if (tOrigin == "right top") {
  textOX = 100;
} else if (tOrigin == "right center") {
  textOX = 100;
  scaleSizeY = 1;
} else if (tOrigin == "right bottom") {
  textOX = 100;
} else if (tOrigin == "center bottom") {
  textOY = 100;
  scaleSizeX = 1;
} else if (tOrigin == "left bottom") {
  textOX = -100;
} else if (tOrigin == "left center") {
  textOX = -100;
  scaleSizeY = 1;
} else if (tOrigin == "center center") {
  textOY = 100;
}

var timing = {animationSpeed} * .01;
var easingType = "Power1.easeIn";
var pauseTime = {pauseTime};

var tl = new TimelineMax();
tl.timeScale( timing );

tl.to("#alertHolder", 0, {opacity: 1, delay: .4})
  .from("#main", .6, {ease: easingType, scaleX: scaleSizeX, scaleY: scaleSizeY})
  .from("#mainText", .3, {x: textOX, y: textOY, opacity: 0}, "-=.1")
  .from(".alt", .6, {ease: easingType, scaleX: scaleSizeX, scaleY: scaleSizeY}, "-=.6")
  .from(".altText", .3, {x: textOX*.5, y: textOY*.5, opacity: 0}, "-=.1")
  .from("#alert-user-message", .3, {x: textOX, y: textOY, opacity: 0 }, "-=.1")

  .to("#message", .3, {x: textOX, y: textOY, opacity: 0, delay: pauseTime })
  .to(".altText", .3, {x: textOX*.5, y: textOY*.5, opacity: 0}, "-=.1")
  .to(".alt", .6, {ease: easingType, scaleX: scaleSizeX, scaleY: scaleSizeY}, "-=.3")
  .to("#mainText", .3, {x: textOX, y: textOY, opacity: 0}, "-=.3")
  .to("#main", .6, {ease: easingType, scaleX: scaleSizeX, scaleY: scaleSizeY}, "-=.3")
  .to("#alert-user-message", .3, {x: textOX, y: textOY, opacity: 0 }, "-=.5")

  .to("#alertHolder", .2, {opacity: 1})
;
});  
}());