Question

所以我将这些CSS属性应用于单词login

 <div class="login_btn">Login</div><!-- The login button-->

这是CSS

            .login_btn, .submit_btn{
            clear: both;
            width: 80px;
            text-align:center;
            background: #4C7FEB;
            color: #fff;
            text-transform: uppercase;
            border: 1px solid #4C7FEB;
            padding: 16px 40px;
            margin: 0 auto;
            -webkit-transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
            -moz-transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
            -o-transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
            transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        .login_btn:hover{
            background: #285AC5;
            box-shadow: none;
        }

我真的很难接受此代码并将其应用于提交按钮。

<input  id="login_btn" name="" value="" type="submit" />

Answer 1

您忘了将类放在input元素中：

<input class="login_btn" id="login_btn" name="" value="" type="submit" />

Answer 2

在此处添加相同的css： #login_btn { //这里的Css代码 }

Answer 3

你可以用这个

input[type=submit]{
    clear: both;
    width: 80px;
    text-align:center;
    background: #4C7FEB;
    color: #fff;
    text-transform: uppercase;
    border: 1px solid #4C7FEB;
    padding: 16px 40px;
    margin: 0 auto;
    -webkit-transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
    -moz-transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
    -o-transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
    transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
input[type=submit]:hover{
    background: #285AC5;
    box-shadow: none;
}

Answer 4

您可以按ID访问该按钮，如下所示：

#login_btn {
    background: #285AC5;
}

您现在正尝试通过类名（“。”运算符）访问它。

Answer 5

试试这个。

input[type="submit"]
{
    //Your styles here
}

警告：这会将定义样式应用于所有提交按钮。因此，请确保这是您想要的。

如果您只想将此样式应用于一个提交按钮，请使用其id或css类，如下所示。

#login_btn, .login_btn {
    //Your style here
}

Answer 6

将课程添加到按钮

到

<input  class="login_btn" id="login_btn" name="" value="" type="submit" />

或将此添加到您的css

#login_btn, .login_btn, .submit_btn{ ... }

Answer 7

这是两个按钮，一个带有div，另一个带有输入按钮。示例位于以下链接，代码位于

之下

检查这个正在运行的样本.. jsfiddle.net/WG2jX /

 <div class="login_btn">Login</div><!-- The login button-->
 <input  class="login_btns" name="" value="Login" type="submit" />

和css将是

.login_btn {
        clear: both;
        width: 80px;
        text-align:center;
        background: #4C7FEB;
        color: #fff;
        text-transform: uppercase;
        border: 1px solid #4C7FEB;
        padding: 16px 40px;
        margin: 0 auto;
        -webkit-transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
        -moz-transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
        -o-transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
        transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    .login_btn:hover{
        background: #285AC5;
        box-shadow: none;
    }
.login_btns {
        clear: both;
        width: 160px;
        text-align:center;
        background: #4C7FEB;
        color: #fff;
        text-transform: uppercase;
        border: 1px solid #4C7FEB;
        padding: 16px 40px;
        margin: 0 auto;
font-size:22px;
        -webkit-transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
        -moz-transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
        -o-transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
        transition: color 0.2s,background-color 0.2s,box-shadow 0.2s,border 0.2s;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    .login_btns:hover{
        background: #285AC5;
        box-shadow: none;
    }

如何将CSS应用于“提交”按钮

7 个答案: