【前端实例代码】一个圆形按钮

最新推荐文章于 2024-09-01 10:00:00 发布

南北极之间

最新推荐文章于 2024-09-01 10:00:00 发布

阅读量1.7k

点赞数 1

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/qq_22182989/article/details/104219616

版权

前端开发专栏收录该内容

601 篇文章

订阅专栏

本文介绍了一个使用CSS设计的按钮样式，包括位置、颜色、边框等属性，展示了如何通过简单的代码实现美观的按钮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
<style>
    .searchBtn {
        position: relative;
        top: -1px;
        right: -1px;
        background: none;
        border: none;
        height: 34px;
        line-height: 34px;
        padding: 0 23px;
        color: #FFF;
        background-color: #1479d7;
        border-radius: 20px;;
        font-size: 16px;
        cursor: pointer;
        font-family: 'Microsoft YaHei', 'PingFang SC';
        margin: 0;
    }
</style>
</head>

<body>
<div>
    <button id="searchBtn" class="searchBtn" type="submit">点击搜索</button>
</div>
</body>
</html>