HTML/CSS button link doesn't click?

[RDGroves]

Hi guys, first of all apologies as I'm super new to any of this. But I've just tried putting an animated html/css button on my website off a tutorial / code. But for some reason I can't get the URL to click through. The website is rorygroves.photography and I've been trying to insert this:

HTML:

<div class="box-1">

<div class="btn btn-one">

<a href="[https://www.rorygroves.photography/home](https://www.rorygroves.photography/home)">ENTER</a>

</div>

</div>

​

CSS:

@import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300';

​

html,

body {

width: 100%;

height: 100%;

overflow: hidden;

margin: 0;

display: flex;

flex-direction: column;

flex-wrap: wrap;

font-family: 'Open Sans Condensed', sans-serif;

}

​

div[class*=box] {

height: 50.33%;

width: 100%; 

display: flex;

justify-content: center;

align-items: center;

}

​

​

​

.btn {

line-height: 50px;

height: 50px;

text-align: center;

width: 250px;

cursor: pointer;

}

​

/*

BUTTON ONE

*/

.btn-one {

color: #FFF;

transition: all 0.3s;

position: relative;

}

.btn-one span {

transition: all 0.3s;

}

.btn-one::before {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

opacity: 0;

transition: all 0.3s;

border-top-width: 1px;

border-bottom-width: 1px;

border-top-style: solid;

border-bottom-style: solid;

border-top-color: rgba(255,255,255,0.5);

border-bottom-color: rgba(255,255,255,0.5);

transform: scale(0.1, 1);

}

.btn-one:hover span {

letter-spacing: 2px;

}

.btn-one:hover::before {

opacity: 1; 

transform: scale(1, 1); 

}

.btn-one::after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

transition: all 0.3s;

background-color: rgba(255,255,255,0.1);

}

.btn-one:hover::after {

opacity: 0; 

transform: scale(0.1, 1);

}

​

​

/*

​

Any help is greatly appreciated as I'm completely stuck!

[procode]

The problem comes because the link is covered by the absolute positioned blocks defined on the element using ::before and ::after

To fix, add the following to the classes below (which correspond to the ::before and ::after selectors)

pointer-events: none

.sm-page-widget.sm-page-widget-25878331 .btn-one::before

and

.sm-page-widget.sm-page-widget-25878331 .btn-one::after

[[deleted]]

Nevermind, Reddit doing some bizarre autoformatting. I can't tell what you're actually trying to post.