Css按钮的复用,控制父元素的大小来控制按钮的大小

Css按钮的复用,控制父元素的大小来控制按钮的大小

通过改变父元素的大小控制按钮的大小

Css按钮的复用,控制父元素的大小来控制按钮的大小

Css按钮的复用,控制父元素的大小来控制按钮的大小

<style type="text/css">
    .parent{
        font-size:50px;
    }
    .button{
        margin: 100px;
        padding: .3em .8em;
        border: 1px solid rgba(0,0,0,.1);
        background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
        border-radius: .2em;
        box-shadow: 0 .05em .25em rgba(0,0,0,.5);
        color: white;
        text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
        font-size: 125%;
        line-height: 1.5;
        outline:none;
    }
    .ok{
        background: #c00;
    }
    .cancel{
        background: #6b0;
    }
    </style>
    <div class="parent">
        <button class="button">leader</button>
        <button class="button ok">OK</button>
        <button class="button cancel">Cancel</button>
    </div>


 

相关文章: