如何将 CSS 应用于提交按钮答案

【问题标题】：How do I apply CSS to a Submit button如何将 CSS 应用于提交按钮
【发布时间】：2014-06-02 23:15:50
【问题描述】：

所以我现在将这些 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" />

【问题讨论】：

标签： php css forms button submit

【解决方案1】：

您忘记将类放在输入元素中，如下所示：

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

【讨论】：

哦，我明白了，我试图使用 div 标签，但那不起作用，然后我认为 id 可能会起作用！ Ty 非常喜欢 :) 但是现在按钮由于某种原因被卡在了一边，而不是像以前的那样以单词 Login 为中心？

【解决方案2】：

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案4】：

您可以通过按钮的 ID 访问按钮，如下所示：

#login_btn {
    background: #285AC5;
}

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

【讨论】：

【解决方案5】：

试试这个。

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

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

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

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

【讨论】：

【解决方案6】：

为您的按钮添加类

到

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

或将其添加到您的 CSS 中

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

【讨论】：

【解决方案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;
    }

【讨论】：

问题的答案必须包含一些代码（如果代码是相关的）。简单地发布指向小提琴的链接是不可接受的。请编辑您的问题以包含完整的答案。