Comment remplacer un button ?

Bonjour,
Je cherche à remplacer un bouton dont voici le JS :
"jQuery(document).ready(function($){
//trigger the animation - open modal window
$('[data-type="modale-trigger"]').on('click', function(){
var actionBtn = $(this),
scaleValue = retrieveScale(actionBtn.next('.cd-modale-bg'));

    actionBtn.addClass('to-circle');
    actionBtn.next('.cd-modale-bg').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        animateLayer(actionBtn.next('.cd-modale-bg'), scaleValue, true);
    });

    //if browser doesn't support transitions...
    if(actionBtn.parents('.no-csstransitions').length > 0 ) animateLayer(actionBtn.next('.cd-modale-bg'), scaleValue, true);
});

//trigger the animation - close modal window
$('.cd-section .cd-modale-close').on('click', function(){
    closeModal();
});
$(document).keyup(function(event){
    if(event.which=='27') closeModal();
});

$(window).on('resize', function(){
    //on window resize - update cover layer dimention and position
    if($('.cd-section.modale-is-visible').length > 0) window.requestAnimationFrame(updateLayer);
});

function retrieveScale(btn) {
    var btnRadius = btn.width()/2,
        left = btn.offset().left + btnRadius,
        top = btn.offset().top + btnRadius - $(window).scrollTop(),
        scale = scaleValue(top, left, btnRadius, $(window).height(), $(window).width());

    btn.css('position', 'fixed').velocity({
        top: top - btnRadius,
        left: left - btnRadius,
        translateX: 0,
    }, 0);

    return scale;
}

function scaleValue( topValue, leftValue, radiusValue, windowW, windowH) {
    var maxDistHor = ( leftValue > windowW/2) ? leftValue : (windowW - leftValue),
        maxDistVert = ( topValue > windowH/2) ? topValue : (windowH - topValue);
    return Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )/radiusValue);
}

function animateLayer(layer, scaleVal, bool) {
    layer.velocity({ scale: scaleVal }, 400, function(){
        $('body').toggleClass('overflow-scroll', bool);
        (bool) 
            ? layer.parents('.cd-section').addClass('modale-is-visible').end().off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend')
            : layer.removeClass('is-visible').removeAttr( 'style' ).siblings('[data-type="modale-trigger"]').removeClass('to-circle');
    });
}

function updateLayer() {
    var layer = $('.cd-section.modale-is-visible').find('.cd-modale-bg'),
        layerRadius = layer.width()/2,
        layerTop = layer.siblings('.btn').offset().top + layerRadius - $(window).scrollTop(),
        layerLeft = layer.siblings('.btn').offset().left + layerRadius,
        scale = scaleValue(layerTop, layerLeft, layerRadius, $(window).height(), $(window).width());

    layer.velocity({
        top: layerTop - layerRadius,
        left: layerLeft - layerRadius,
        scale: scale,
    }, 0);
}

function closeModal() {
    var section = $('.cd-section.modale-is-visible');
    section.removeClass('modale-is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        animateLayer(section.find('.cd-modale-bg'), 1, false);
    });
    //if browser doesn't support transitions...
    if(section.parents('.no-csstransitions').length > 0 ) animateLayer(section.find('.cd-modale-bg'), 1, false);
}

});

var TxtRotate = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};

TxtRotate.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];

if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}

this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

var that = this;
var delta = 300 - Math.random() * 100;

if (this.isDeleting) { delta /= 2; }

if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}

setTimeout(function() {
that.tick();
}, delta);
};

window.onload = function() {
var elements = document.getElementsByClassName('txt-rotate');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-rotate');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtRotate(elements[i], JSON.parse(toRotate), period);
}
}
// INJECT CSS
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
document.body.appendChild(css);
};"
par un simple bouton :
"<p><a href="#fermer" <i class="fa fa-times orange"></i></a></p> "
Je vous laisse les CSS du bouton que je désire remplacer :
".cd-modale-action {
position: relative;
}
.cd-modale-action .btn, .cd-modale-action .cd-modale-bg {
display: inline-block;
height: 4em;
background-color: black;
border-radius: 0;
}

.cd-modale-action .btn {
width: 12.5em;
line-height: 3em;
white-space: nowrap;
font-weight: 700;
margin-top: 30px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: color 0.2s 0.3s, width 0.3s 0s;
-moz-transition: color 0.2s 0.3s, width 0.3s 0s;
transition: color 0.2s 0.3s, width 0.3s 0s;
margin-bottom: 20px;
}

.cd-modale-action .btn.to-circle {
width: 4em;
color: transparent;
-webkit-transition: color 0.2s 0s, width 0.3s 0.2s;
-moz-transition: color 0.2s 0s, width 0.3s 0.2s;
transition: color 0.2s 0s, width 0.3s 0.2s;
}
.cd-modale-action .cd-modale-bg {
position: absolute;
z-index: 1;
left: 50%;
top: 0;
width: 4em;
border-radius: 50%;
opacity: 0;
visibility: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: translateX(-2em);
-moz-transform: translateX(-2em);
-ms-transform: translateX(-2em);
-o-transform: translateX(-2em);
transform: translateX(-2em);
-webkit-transition: visibility 0s 0.5s;
-moz-transition: visibility 0s 0.5s;
transition: visibility 0s 0.5s;
}
.cd-modale-action .cd-modale-bg.is-visible {
opacity: 1;
visibility: visible;
}
/ ------------ /
.cd-modale-close {
position: fixed;
z-index: 1;
top: 10px;
right: 30px;
height: 50px;
width: 50px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3) url(../imgs/cd-icon-close.svg) no-repeat center center;
/ image replacement /
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
visibility: hidden;
opacity: 0;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
}
.no-touch .cd-modale-close:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.modale-is-visible .cd-modale-close {
visibility: visible;
opacity: 1;
-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.txt-rotate {
font-family:"Courier New", Courier, monospace;
color: #FF8C00;
}"
Merci pour votre aide,
RD