如何根据提供的规范编写css类？

Question

您好我正在尝试按照给出的规范编写css类。例如，如果我正在设计一个按钮，他们给出了如下规格。 正常： -

悬停： -

下面是我的html代码，显示按钮。

<input type="button" class="btn" value="Button"/>

我想根据提供的规范为上面的按钮编写类。我可以知道如何写这个吗？我已尝试过以下内容，但如果我错了，请纠正我。

 .btn {
            background: rgb(12,116,218);
            border: rgb(12,116,218);
            border-bottom: rgb(0,76,151);
        }

另外，如何根据上述规范为悬停编写css？任何帮助，将不胜感激。谢谢

Answer 1

使用:hover选择器

创建另一个规则

.btn {
    background: rgb(12,116,218);
    border: rgb(12,116,218);
    border-bottom: rgb(0,76,151);
}
.btn:hover {
    background: rgb(46,146,250);
}

<input type="button" class="btn" value="Button"/>

Answer 2

使用CSS伪选择器，您也可以组合多个选择器的样式（由逗号分隔）

＆＃13;

＆＃13;

/* styles for the element */
.btn {
    background: rgb(12,116,218);
    border: 1px solid #0C74Da;
    border-bottom: rgb(0,76,151);
    
}

/* styling when on hover */
.btn:hover {
    background: rgb(46,146,250);
    border: 1px solid #2E92FA;
}

/* styles for both cases */
.btn, .btn:hover{
    font-size: 13px;
    color: white;
}

＆＃13;

<input type="button" class="btn" value="Button"/>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以按照以下方式编写CSS：

.btn {
  background: rgb(12,116,218);
  border: rgb(12,116,218);
  border-bottom: rgb(0,76,151);
}

.btn:hover{
  background: rgb(255,0,0);
}

.btn:active { 
    background-color: yellow;
}

.btn:visited {
    color: black;
}

<input type="button" class="btn" value="Button"/>

更好的文档check this