WebApp按钮样式css实例

最新推荐文章于 2025-02-11 12:48:51 发布

风一样的执着

最新推荐文章于 2025-02-11 12:48:51 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/alan294902466/article/details/50294551

HTML/HTML5/CSS/JS 同时被 2 个专栏收录

6 篇文章

订阅专栏

WebApp

4 篇文章

订阅专栏

本博客介绍了一种响应式设计的购物车按钮，适用于不同屏幕尺寸，旨在提供流畅的一键购买与加入购物车操作体验。通过CSS媒体查询调整字体大小，确保在各种设备上都能获得良好的视觉效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        @media only screen and (max-width: 2560px) { html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size:85px; }}
        @media only screen and (max-width: 1600px) { html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size:53px; }}
        @media only screen and (max-width: 1440px) { html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size:48px; }}
        @media only screen and (max-width: 1280px) { html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size:42.5px; }}
        @media only screen and (max-width: 1080px) { html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size:36px; }}
        @media only screen and (max-width: 1024px) { html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size:34px; }}
        @media only screen and (max-width: 960px) { html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size:32px; }}
        @media only screen and (max-width: 900px) { html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size:30px; }}
        @media only screen and (max-width: 800px) { html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size:26.5px; }}
        @media only screen and (max-width: 770px) { html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size:25.5px; }}
        @media only screen and (max-width: 720px) {html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size: 24px; }}
        @media only screen and (max-width: 640px) {html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size: 21px; }}
        @media only screen and (max-width: 600px) {html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size: 20px; }}
        @media only screen and (max-width: 560px) {html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size: 18px; }}
        @media only screen and (max-width: 480px) {html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size: 16px; }}
        @media only screen and (max-width: 420px) {html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size: 13.5px; }}
        @media only screen and (max-width: 390px) {html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size: 12.5px; }}
        @media only screen and (max-width: 360px) {html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size: 12px; }}
        @media only screen and (max-width: 320px) {html,body,div,p,dl,dt,dd,ul,ol,li,form,fieldset,button,iput,textarea,select,em,a{ font-size: 10.5px; }}
        .btn_base{//按钮基本样式
            float: left;
            padding: 1.5em 2em;
            margin: .5em;
            width: 30%;
            border-radius: .5em;
            text-align: center;
        }
        .btn_color{//按钮颜色
            background-color: #02ca0f;
        }
        .btn_title{//按钮文字
            color:#FFFFFF;
            font-weight: bold;
            font-size: 1.5em;
        }
    </style>
</head>
<body>
    <div class="btn_base btn_color">
        <a class="btn_title">购买</a>
    </div>
    <div class="btn_base btn_color">
        <a class="btn_title">加入购物车</a>
    </div>
</body>
</html>