自定义CSS按钮动画在MVC C＃部分视图中不起作用

Question

I have a custom css button that is supposed fill up from the bottom. I am working in an MVC C# project and specifically a partial view is giving me trouble.

The custom button works on normal views but the fill on hover never gets rendered for some reason. Only the color of the text changes on hover. The css 'before' action never seems to get rendered. What am I missing? Hopefully I am missing something obvious!

 .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> 

Thanks in advance!

Answer 1

Have a look at this codepen :) the first button should be your solution. For any reason it does not work with an input. Just take the button tag and there you go... Here is the content applied to your example code:

 .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" /> doesn't play nice with pesudo styling :before and :after You're going to want to have to use <button class="custom-up-btn-request up-btn-request-fill">Submit</button>

fiddle link: http://jsbin.com/wakiretaco/1/edit?html,css,output