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按鈕框陰影轉換

回答

相關問題