// screen height and down arrow var covercounter = 1; $(".wp-block-cover.down-arrow").each(function() { var idlabel = covercounter++ ; $(this).after('<div class="no-margin-top-and-bottom" id="' + idlabel + 'after"></div>'); $(this).find('.wp-block-cover__inner-container').append('<div class="down-arrow-button"><a href="#' + idlabel +'after"><span class="screen-reader-text">Scroll down</span></a></div>'); });
SCSS
.down-arrow-button { text-align: center; display: block; width: 100% !important; a { color: white; text-align: center; display: inline-block; position: relative; width: rem-calc(30); height: rem-calc(30); background-image: url('./images/icons/icon-down-arrow.svg'); background-repeat: no-repeat; .screen-reader-text { color: #000; } } }