CSS按钮动画 - 如何完成？

Question

我找到了这个网站:http: //www.hue.pl/portfolio

它有非常好的按钮动画.如果您将鼠标悬停在"品牌"上(例如,在大Chwalimy si?!文本旁边的右侧).我怎样才能完成这个动画,它叫什么？

提前致谢.

编辑:问题"你有什么尝试？":

<style>
a {
    color:#000;
    text-decoration:none;
}
a:after {
    content: attr(title);
    position: absolute;
    left: 0px;
    width: 0px;
    color: #ffffff;
    overflow: hidden;
    transition: all 0.2s;
}
</style>

<a href="" title="Hi all">Hi all</a>

Answer 1

您可以使用after宽度设置为零的伪元素执行此操作.悬停时将其宽度更改为100%

body{
    font-family:"Helvetica neue",sans-serif;
}

.text{
    width:200px;
    height:50px;
    border:2px solid #000;
    position:relative;
    line-height:50px;
    background:tomato;
    font-size:20px;
}

.text:after{
    position:absolute;
    content:"Hover Me!!";
    width:0;
    overflow:hidden;
    height:50px;
    line-height:50px;
    color:#fff;
    background:tomato;
    transition:.5s all;
    left:0;
    font-size:20px;
}

.text:hover:after{
    width:100%;
}

<div class="text">Hover Me!!</div>