HTMLでベースのボタンを作って、幅や高さ、背景や文字の色、などをCSSで作り動きのあるボタンが作れます。
今回はベーシックなテキストをマウスオーバー すると、下線がニョキッと出てくる、アレです。下記CSSをクラスに使ってみてください。

CSS

.text-line-left{
display: inline-block;
position: relative;
text-decoration: none;
font-size: 2rem;
font-weight: bold;
}
.text-line-left::after {
position: absolute;
content: ”;
top: 45px;
bottom: 0;
left: 0;
width: 0;
z-index: -1;
height: 5px;
background: rgb(184, 0, 0);
transition: all .2s ease;
}
.text-line-left:hover {
opacity: 0.7;
cursor: pointer;
}
.text-line-left:hover::after {
width: 100%;
}

Preview

TEXT BUTTON