How do I use the hover effect for the project tiles?

HTML-CSS
#1

I discovered these cool hover effects that someone else had created and I wanted to use the same effect of button 2 in my code for my personal portfolio page. Here is my code. https://codepen.io/Sar8299/pen/VwjvaYq. How do I do so?

The effects are from this code https://codepen.io/davidicus/pen/emgQKJ and I am interested in using the effect on button two in my own code for the project tiles. Can someone show me how to input it so it will work successfully in my own code?

#2

As far as you’ve source code, you can take a look at it, and design your buttons accordingly…
Here’s .btn2 css

.btn-2 {
    letter-spacing: 0;
}

.btn-2:hover,
.btn-2:active {
  letter-spacing: 5px;
}

.btn-2:after,
.btn-2:before {
  backface-visibility: hidden;
  border: 1px solid rgba(#fff, 0);
  bottom: 0px;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  transition: all 280ms ease-in-out;
  width: 0;
}

.btn-2:hover:after,
.btn-2:hover:before {
  backface-visibility: hidden;
  border-color: #fff;
  transition: width 350ms ease-in-out;
  width: 70%;
}

.btn-2:hover:before {
  bottom: auto;
  top: 0;
  width: 70%;
}

There are other styles in this

to design the anchor tags as button…
As in the source code SCSS is written, you can learn SCSS at

#3

I would probably suggest transitioning the scale and opacity for the pseudo-elements. Although the letter-spacing transition might negate most of the performance benefits, I still think it is cleaner.

Example

#4

Thank you! Just another question though, would i have to add buttons in my code since they arent there or would i have to change the css from.btn-2 to div.projects.buttons?

#5