自定義CSS按鈕動畫在MVC C＃部分視圖中不起作用

Question

我有一個自定義的CSS按鈕，應該從底部填滿。 我正在MVC C＃項目中工作，特別是局部視圖給我帶來了麻煩。

自定義按鈕可在普通視圖上使用，但由於某些原因永遠不會呈現懸停時的填充。 懸停時僅文本的顏色會更改。 css的“之前”動作似乎從未得到渲染。 我想念什么？ 希望我缺少明顯的東西！

 .custom-up-btn-request { position: relative; display: inline-block; margin-bottom: 0; text-align: center; vertical-align: middle; margin: 15px 0px; padding: 5px 10px; font-size: 16px; color: blue; border: 2px blue solid; border-radius: 4px; outline: 0; overflow: hidden; background: none; z-index: 1; cursor: pointer; transition: 0.08s ease-in; -o-transition: 0.08s ease-in; -ms-transition: 0.08s ease-in; -moz-transition: 0.08s ease-in; -webkit-transition: 0.08s ease-in; } .custom-up-btn-request:focus { color: blue; text-decoration: none; } .up-btn-request-fill:hover { color: lawngreen; text-decoration: none; } .up-btn-request-fill:before { content: ""; position: absolute; background: blue; bottom: 0; left: 0; right: 0; top: 100%; z-index: -1; -webkit-transition: top 0.09s ease-in; } .up-btn-request-fill:hover:before { top: 0; } 

 <div class="form-group"> <div class="control-label col-md-3"><b>Submit Change Request</b></div> <div class="col-md-5"> <textarea class="form-control" rows="6" cols="20" id="ChangesText" name="ChangesText" placeholder="Put any changes you need."></textarea> </div> <div class="col-md-4"></div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <input type="submit" value="Submit Request" class="custom-up-btn-request up-btn-request-fill" /> </div> </div> 

提前致謝！

Answer 1

看看這個 codepen :)第一個按鈕應該是您的解決方案。 由於任何原因，它不適用於輸入。 只需獲取button標記，就可以開始...這是應用於示例代碼的內容：

 .custom-up-btn-request { position: relative; display: inline-block; margin-bottom: 0; text-align: center; vertical-align: middle; margin: 15px 0px; padding: 5px 10px; font-size: 16px; color: blue; border: 2px blue solid; border-radius: 4px; outline: 0; overflow: hidden; background: none; z-index: 1; cursor: pointer; transition: 0.08s ease-in; -o-transition: 0.08s ease-in; -ms-transition: 0.08s ease-in; -moz-transition: 0.08s ease-in; -webkit-transition: 0.08s ease-in; } .custom-up-btn-request:focus { color: blue; text-decoration: none; } .up-btn-request-fill:hover { color: lawngreen; text-decoration: none; } .up-btn-request-fill:before { content: ""; position: absolute; background: blue; bottom: 0; left: 0; right: 0; top: 100%; z-index: -1; -webkit-transition: top 0.09s ease-in; } .up-btn-request-fill:hover:before { top: 0; } 

 <div class="form-group"> <div class="control-label col-md-3"><b>Submit Change Request</b></div> <div class="col-md-5"> <textarea class="form-control" rows="6" cols="20" id="ChangesText" name="ChangesText" placeholder="Put any changes you need."></textarea> </div> <div class="col-md-4"></div> </div> <div class="form-group"> <div class="col-md-offset-3 col-md-9"> <buttontype="submit" class="custom-up-btn-request up-btn-request-fill"/>Submit Request</button </div> </div> 

Answer 2

<input type="submit" />不能與假樣式一起使用:before和:after您將不得不使用<button class="custom-up-btn-request up-btn-request-fill">Submit</button>

小提琴鏈接： http : //jsbin.com/wakiretaco/1/edit?html,css,output