Css按钮框阴影转换

我在按钮上制作过渡效果时遇到了一些麻烦。Css按钮框阴影转换

使用 “的box-shadow” 我能够创造这样的：

.load { 
 
\t color:black; 
 
\t border:none; 
 
\t background-color: #ffffff; 
 
\t width: 100px; 
 
\t height: 30px; 
 
\t margin-left: 21px; 
 
\t box-shadow: inset 0 0 0 0 #000000; 
 
\t transition-duration: 0.3s; 
 
\t transition-timing-function: ease-in; 
 

 
} 
 
.load:hover { 
 
\t transition-duration: 0.3s; 
 
\t box-shadow: inset 0 -3px 0 0 #000000; 
 
}

\t <button class="load"> Home 
 
    \t </button>

阴影来自底部的3px到按钮。我希望它能够从左到右，但仍然保持在3px的高度。

我也很确定这个网站有它的工作，但我无法从检查中提取所需的CSS。

Website

谢谢！

来源

2016-03-30 Nnoka

是否强制必须与'箱shadow'？我不认为你可以用阴影来做，但有其他方法可以做到。 – Harry

http://stackoverflow.com/questions/35641827/animated-css-underline-on-delay/35643574#35643574可能的重复 – Harry

您可以使用:after属性来执行此操作。看我下面的例子。 after元素的宽度在0到100％之间变化以获得效果。您可以根据需要轻松调整.home-link:after的设置。

仅使用box-shadow不是最佳方式，当然也不是最佳做法。

.home-link { 
 
    position: relative; 
 
    background: none; 
 
    border: none; 
 
    font-size: 1em; 
 
    color: blue; 
 
    width: 80px; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.home-link:after { 
 
    position: absolute; 
 
    bottom: 0; 
 
    content: ''; 
 
    display: block; 
 
    width: 0; 
 
    height: 3px; 
 
    background: #000; 
 
    -webkit-transition: width .2s ease-in-out; 
 
    transition: width .2s ease-in-out; 
 
} 
 

 
.home-link:hover:after { 
 
    width: 100%; 
 
}

<button class="home-link">Home</button>

来源

2016-03-30 10:21:47 Roy

Css按钮框阴影转换

回答

相关问题