Squarespace animated button css

Hi,

I'm wondering if anyone is able to help me achieve these animated buttons please!  

https://codemyui.com/minimalistic-hover-effect-button-animations/

I would like to acheive the same effect as button 13, the code pen code is showing:

.btn-13 {
  border: 2px solid #000;
  z-index: 1;
}
.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  background: #000;
  transition: all 0.3s ease;
}
.btn-13:hover {
  color: #fff;
}
.btn-13:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-13:active {
  top: 2px;
}

Thank you!
 

Add a Code Block > paste this code

<button class="custom-btn btn-13">Read More</button>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
  .custom-btn {
  padding: 10px 25px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  background: transparent;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}
  /**** BTN No. 13 ****/
.btn-13 {
  border: 2px solid #000;
  z-index: 1;
}
.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  background: #000;
  transition: all 0.3s ease;
}
.btn-13:hover {
  color: #fff;
}
.btn-13:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-13:active {
  top: 2px;
}
</style>

Thank you so so much!! This is great. Is there any way to center the button please? currently it is to the left. Thank you!!

Also how do i make the buttons linked to go to different pages please?

Thank you

14 hours ago, BLK said:

Also how do i make the buttons linked to go to different pages please?

Thank you

Can you share link to page where you added the code? We can imagine button easier to check