HTML+CSS 交互式开关按钮

最新推荐文章于 2024-07-12 20:49:16 发布

若冰说

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量669

点赞数 29

分类专栏：若冰说CSS css 文章标签： css html css3 javascript 前端若冰说CSS

本文链接：https://blog.csdn.net/weixin_72553980/article/details/139585458

版权

效果演示

18-交互式开关按钮.gif

实现了一个交互式开关按钮的效果，包括一个标签和两个选项（Yes和No），当用户点击其中一个选项时，按钮会发生动画效果，同时选中的选项会被高亮显示。整个按钮的样式采用了渐变背景色、圆角边框、阴影等元素，使得按钮看起来更加美观。

Code

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交互式开关按钮</title>
    <link rel="stylesheet" href="./18-交互式开关按钮.css">
</head>

<body>
    <div class="container">
        <p>会给我三连吗？</p>
        <div class="input-box">
            <label>
                <input type="radio" name="yes_no">
                <span class="yes"></span>
                必须滴
            </label>
            <label>
                <input type="radio" name="yes_no">
                <span class="no">

最低0.47元/天解锁文章

若冰说

关注

29
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS 交互式开关按钮

实现了一个交互式开关按钮的效果，包括一个标签和两个选项（Yes和No），当用户点击其中一个选项时，按钮会发生动画效果，同时选中的选项会被高亮显示。整个按钮的样式采用了渐变背景色、圆角边框、阴影等元素，使得按钮看起来更加美观。
复制链接

扫一扫