<!-- ① -->
<figcaption>
<h4 data-letters="Create life is freedom"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Create life is freedom</font></font></h4>
</figcaption>
<figcaption>
<h4 data-letters="Create life is freedom"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Create life is freedom</font></font></h4>
</figcaption>
<!-- ② -->
<p class="text-progress" data-txt="Create life is freedom">Create life is freedom</p>
<p class="text-progress" data-txt="Create life is freedom">Create life is freedom</p>
<!-- ③ -->
<a href="" class="button-link"><span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Create life is freedom</font></font></span><i class="arrow"></i></a>
<!-- ④ -->
<a class="hover" href="#">Create life is freedom</a>
/* ① */
figcaption h4 {
position: relative;
overflow: hidden;
display: inline-block;
}
figcaption h4:hover:before {
width: 100%;
}
figcaption h4:before {
content: attr(data-letters);
position: absolute;
z-index: 2;
overflow: hidden;
color: #f5aa95;
color: blue;
white-space: nowrap;
width: 0%;
-webkit-transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ② */
.text-progress {
position: relative;
width: 300px;
height: 100px;
line-height: 100px;
margin: 0 auto;
font-size: 20px;
text-align: center;
color: #ccc;
}
.text-progress::after {
content: attr(data-txt);
position: absolute;
top: -24px;
left: 0;
width: 100%;
height: 100px;
line-height: 100px;
color: #1a1e24;
color: blue;
clip: rect(0,0,100px,0);
transition: clip 1.5s linear;
}
.text-progress:hover::after {
clip: rect(0,300px,100px,0);
}
/* ③ */
a {
text-decoration: none;
cursor: pointer;
}
a.button-link {
font: normal 700 14px/14px 'Poppins', serif;
letter-spacing: 5px;
color: #262b2e;
text-align: left;
text-transform: uppercase;
cursor: pointer;
display: inline-block;
padding: 0px 20px 0px 0px;
}
a.button-link span {
padding: 0px 0px 0px 60px;
position: relative;
z-index: 2;
}
a.button-link:before {
position: relative;
top: 7px;
left: 0px;
width: 40px;
height: 2px;
display: block;
content: '';
background-color: #f5aa95;
-webkit-transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1;
}
a.button-link i {
position: relative;
top: -1px;
left: 10px;
width: 5px;
height: 8px;
display: inline-block;
padding: 0px 0px 0px 10px;
margin:0;
background-image: url(‘〇〇’.png);
background-size: 5px 8px;
background-repeat: no-repeat;
background-position: center right;
-webkit-transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1;
}
a.button-link:hover:before {
left: 100%;
}
a.button-link:hover i {
left: 45px;
}
/* ④ */
a.hover {
position: relative;
display: inline-block;
font-size: 2em;
font-weight: 800;
color: royalblue;
overflow: hidden;
background: linear-gradient(to left, black, black 50%, blue 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;
transition: background-position 275ms ease;
}
a.hover:hover {
background-position: 0 100%;
}