Find the code used in this tutorial in below

Color code used:

Page Background Color:
#0B2447

Button Background Color:
#19376D

CSS code used:

.awesome-button a > span > span > span{

position: absolute;
width: 10px;
height: 10px;
transition: 0.5s;
}

.awesome-button a > span > span > span:nth-child(1){
top: -2px;
left: -2px;
background-color: #131316;
border-bottom: 2px solid #23a7f2;
border-right: 2px solid #23a7f2;
transition-delay: 0s;
}

.awesome-button a > span > span > span:nth-child(2){
top: -2px;
right: -2px;
background-color: #131316;
transform: rotate(90deg);
border-bottom: 2px solid #23a7f2;
border-right: 2px solid #23a7f2;
transition-delay: 0.25s;
}

.awesome-button a > span > span > span:nth-child(3){
bottom: -2px;
right: -2px;
background-color: #131316;
transform: rotate(180deg);
border-bottom: 2px solid #23a7f2;
border-right: 2px solid #23a7f2;
transition-delay: 0.5s;
}

.awesome-button a > span > span > span:nth-child(4){
bottom: -2px;
left: -2px;
background-color: #131316;
transform: rotate(270deg);
border-bottom: 2px solid #23a7f2;
border-right: 2px solid #23a7f2;
transition-delay: 0.75s;
}

.awesome-button:hover a > span > span > span:nth-child(1){
top: calc(100% - 8px);
left: calc(100% - 8px);
background-color: transparent;
transition-delay: 0s;
}

.awesome-button:hover a > span > span > span:nth-child(2){
top: calc(100% - 8px);
right: calc(100% - 8px);
background-color: transparent;
transition-delay: 0.25s;
}

.awesome-button:hover a > span > span > span:nth-child(3){
bottom: calc(100% - 8px);
right: calc(100% - 8px);
background-color: transparent;
transition-delay: 0.5s;
}

.awesome-button:hover a > span > span > span:nth-child(4){
bottom: calc(100% - 8px);
left: calc(100% - 8px);
background-color: transparent;
transition-delay: 0.75s;
}

JavaScript code used:

<script>
window.onload = function () {
	var aweBtn = document.querySelector('.awesome-button a > span > span');

for(var i=0;i<4;i++){
  aweBtn.append(document.createElement('span'));
}
};
</script>