按钮实现

最新推荐文章于 2022-03-30 15:47:11 发布

passerby_Ai

最新推荐文章于 2022-03-30 15:47:11 发布

阅读量430

点赞数

本文链接：https://blog.csdn.net/weixin_45736498/article/details/106868557

版权

带圆角按钮的实现

实现按钮的方式
- button: 行内块级元素
  - <input type="button">: 表单组件
  - <button>: 按钮
- a: 链接，在鼠标悬停的时候可以提供不同的样式
- div
实现主要看自己选择什么，主要是css样式

button

html

<input type="button" value="点击">
<br>
<br>
<button value="点击">点击</button>

css

       input{
            border: 1px  solid rgba(120,188,133,0.5);
            width: 126px;
            height: 46px;
            border-radius: 23px;
            background-color: transparent;
            font-size: 14px;
            font-weight: 200;
            color: #00CD00;
        }

        button{
            border: 1px  solid rgba(120,188,133,0.5);
            width: 126px;
            height: 46px;
            border-radius: 23px;
            background-color: transparent;
            font-size: 14px;
            font-weight: 200;
            color: #00CD00;
        }
		input:hover,button:hover{
            background-color: #00CD0020;
        }

a标签

html

<a href="#">点击</a>

css

       a{
            display: inline-block;
            text-decoration: none;
            width: 126px;
            height: 46px;
            border: 1px  solid rgba(120,188,133,0.5);
            background-color: transparent;
            font-size: 14px;
            font-weight: 200;
            border-radius: 23px;
            color: #00CD00;
            text-align: center;
            line-height: 46px;
        }
		a:hover{
            background-color: #00CD0020;
        }

div一个圆的按钮

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02</title>
    <style type="text/css">
        .box_1{
            display: inline-block;
            width: 38px;
            height: 38px;
            border: 1px  solid rgba(120,188,133,0.5);
            border-radius: 22px;
            padding: 3px;
        }

        .box_2{
            width: 38px;
            height: 38px;
            border-radius: 19px;
            background-color: #00CD0030;

            background-image:url("imgs/edit-icon.png");
            background-size: 19px 20px;
            background-repeat: no-repeat;
            background-position: center;
        }

    </style>
</head>
<body>
    <div class="box_1">
        <div class="box_2">

        </div>
    </div>
</body>
</html>

passerby_Ai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
按钮实现

带圆角按钮的实现实现按钮的方式button: 行内块级元素<input type="button">: 表单组件<button>: 按钮a: 链接，在鼠标悬停的时候可以提供不同的样式div实现主要看自己选择什么，主要是css样式buttonhtml<input type="button" value="点击"><br><br><button value="点击">点击&lt
复制链接

扫一扫