css按钮的大小设置-css教程-PHP中文网

css按钮的大小设置

藏色散人

发布： 2021-04-08 09:47:27

原创

10571人浏览过

css按钮的大小设置方法：首先创建一个HTML示例文件；然后在body中通过button标签创建一个按钮；最后使用“font-size”属性来设置按钮大小即可。

css按钮的大小设置

本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

可以使用 font-size 属性来设置按钮大小:

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>

<h2>按钮大小</h2>
<p>我们可以使用 font-size 属性来设置按钮大小:</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/11135">
                            <img src="https://img.php.cn/upload/webcode/000/000/005/176509080830317.jpg" alt="KGOGOMALL">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/11135">KGOGOMALL</a>
                            <p>主要功能：无限级分类，可自由调整分类位置，商品可在各分类间自由转移；  商品组合：可以为每种商品添加多种选项，方便顾客购买选择，比如：一件衣服顾客可以选择款式、花色、大小等，笔记本电脑，可以有cpu、内存、显示屏、硬盘等等扩展属性； 会员分级功能，会员积分功能。可根据会员积分自行设定用户组，管理员可自行定义会员获得积分的方式：按订单总金额或者按单个商品给予积分；   按照商品类别查看热卖、特价，允</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="KGOGOMALL">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/11135" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="KGOGOMALL">
                        </a>
                    </div>
                

<button class="button button1">10px</button>
<button class="button button2">12px</button>
<button class="button button3">16px</button>
<button class="button button4">20px</button>
<button class="button button5">24px</button>

</body>
</html>

登录后复制

效果如下：