如何将复选框设置为看起来像具有悬停效果的按钮？-css教程-PHP中文网

如何将复选框设置为看起来像具有悬停效果的按钮？

Patricia Arquette

发布： 2024-10-29 00:52:30

原创

223 人浏览过

How to Style a Checkbox to Look Like a Button with a Hover Effect?

将复选框样式设置为具有悬停效果的按钮

创建自定义样式的 UI 元素可以增强用户体验。在本例中，您希望将复选框替换为类似按钮的外观，此外，您希望实现悬停效果以改善交互。

HTML 结构：

<code class="html"><div id="ck-button">
   <label>
      <input type="checkbox" value="1"><span>red</span>
   </label>
</div></code>

登录后复制

CSS 样式：

要将复选框样式设置为按钮并实现悬停效果，您可以使用以下 CSS：

<code class="css">div label input {
   margin-right:100px;
}

body {
    font-family:sans-serif;
}

#ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
}

#ck-button label input {
    position:absolute;
    top:-20px;
}

#ck-button input:checked + span {
    background-color:#911;
    color:#fff;
}

#ck-button:hover {
    background:red;
}</code>

登录后复制

悬停样式：

添加悬停效果的关键是以下 CSS：

<code class="css">#ck-button:hover {
    background:red;
}</code>

登录后复制

这指定当用户将鼠标悬停在按钮样式的复选框上时，背景将变为红色。

实时示例：

请参阅以下小提琴中的实时示例：

http://jsfiddle.净/zAFND/4/

以上是如何将复选框设置为看起来像具有悬停效果的按钮？的详细内容。更多信息请关注PHP中文网其他相关文章！