按钮

Question

我有一个带图标的按钮。图标被隐藏。当我将鼠标悬停在按钮上时，会出现图标。 transform在按钮上工作正常。但是在文本上它没有用。

代码

        .btn.btn-rolling{
           overflow: hidden;
           position: relative;
        }
        
        .btn.btn-rolling i{
           transform: translateX(-30px); 
        }
        
        .btn.btn-rolling span{
           transform: translateX(-30px); 
        }

<button class="btn btn-rolling"><i class="fa facebook"></i><span>Click me</span></button>

Answer 1

您好，您不需要transform文字。如果您要将该属性添加到button，那么span内的button也将具有转换属性。

看这个：

http://jsfiddle.net/Saiyam/o1L6p20d/3/

Answer 2

这可以使用table-properties。