<script>
    $('#rec000000000 .tn-elem[data-elem-id="0000000000000"] .tn-atom').addClass("diagonal_swipe_left");   
</script>

<style>
.diagonal_swipe_left{
    overflow: hidden;
    z-index: 1;
    position: relative;
    -webkit-transition: 0.1s ease-out;
    transition: 0.1s ease-out;
       
   }
 
.diagonal_swipe_left:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 0%;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    border-right: 50px solid transparent;
    border-bottom: 80px solid #000;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    z-index: -1;
}    

.diagonal_swipe_left:hover {
    -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    color: #ffffff;
    z-index: 8;
}
.diagonal_swipe_left:hover:before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
</style>

<script>
    $('#rec000000000 .tn-elem[data-elem-id="0000000000000"] .tn-atom').addClass("diagonal_swipe_right");   
</script>

<style>
.diagonal_swipe_right{
    overflow: hidden;
    z-index: 1;
    position: relative;
    -webkit-transition: 0.1s ease-out;
    transition: 0.1s ease-out;     
}
.diagonal_swipe_right:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 0%;
    -webkit-transform: translateX(100%);
    transform: translateX(80%);
    border-left: 50px solid transparent;
    border-bottom: 80px solid #000;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    z-index: -1;
}    
.diagonal_swipe_right:hover {
    -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    color: #ffffff;
    z-index: 8;
}
.diagonal_swipe_right:hover:before {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
}
</style>

<script>
    $('#rec000000000 .tn-elem[data-elem-id="0000000000000"] .tn-atom').addClass("swipe_left");   
</script>

<style>
.swipe_left{
    overflow: hidden;
    z-index: 1;
    position: relative;
    -webkit-transition: 0.1s ease-out;
    transition: 0.1s ease-out;
} 
.swipe_left:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 0%;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    border-bottom: 80px solid #000;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    z-index: -1;
}
.swipe_left:hover {
    -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    color: #ffffff;
    z-index: 8;
}
.swipe_left:hover:before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
</style>

<script>
    $('#rec000000000 .tn-elem[data-elem-id="0000000000000"] .tn-atom').addClass("swipe_right");   
</script>

<style>
.swipe_right{
    overflow: hidden;
    z-index: 1;
    position: relative;
    -webkit-transition: 0.1s ease-out;
    transition: 0.1s ease-out;       
}
.swipe_right:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 0%;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    border-bottom: 80px solid #000;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    z-index: -1;
}
.swipe_right:hover {
    -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    color: #ffffff;
    z-index: 8;
}
.swipe_right:hover:before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
</style>

<script>
    $('#rec000000000 .tn-elem[data-elem-id="0000000000000"] .tn-atom').addClass("swipe_top");   
</script>

<style>
.swipe_top{
    overflow: hidden;
    z-index: 1;
    position: relative;
    -webkit-transition: 0.1s ease-out;
    transition: 0.1s ease-out;       
}
.swipe_top:before {
    content: '';
    position: absolute;
    top: 0;
    left: -5px;
    display: block;
    width: 110%;
    height: 0%;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    border-bottom: 85px solid #000;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    z-index: -1;
}    
.swipe_top:hover {
    -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    color: #ffffff;
    z-index: 8;
}
.swipe_top:hover:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
</style>

<script>
    $('#rec000000000 .tn-elem[data-elem-id="0000000000000"] .tn-atom').addClass("swipe_bottom");   
</script>

<style>
.swipe_bottom{
    overflow: hidden;
    z-index: 1;
    position: relative;
    -webkit-transition: 0.1s ease-out;
    transition: 0.1s ease-out;      
}
.swipe_bottom:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 0%;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    /*Значение у border-bottom должно быть больше на 1-4 пикселей, чем высота кнопки*/
    border-bottom: 80px solid #000;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    z-index: -1;
}    
.swipe_bottom:hover {
    -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
    color: #ffffff;
    z-index: 8;
}
.swipe_bottom:hover:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
</style>