WebApp按钮样式css实例

来源：互联网发布：法拉克机器人编程编辑：程序博客网时间：2024/06/08 17:57
<!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>
0 0