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

Question

我有一个应该从底部填充的自定义 css 按钮。我在 MVC C# 项目中工作，特别是部分视图给我带来了麻烦。

自定义按钮适用于普通视图，但由于某种原因，悬停时的填充永远不会被渲染。悬停时只有文本的颜色会发生变化。 css 'before' 动作似乎永远不会被渲染。我错过了什么？希望我遗漏了一些明显的东西！

.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

看看this codepen :) 第一个按钮应该是您的解决方案。 出于任何原因，它不适用于输入。只需拿起按钮标签，然后就可以了... 以下是应用于您的示例代码的内容：

.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