1.直接用transform

transform：scale(0.5,0.5);
border:1px solid #fff;

这种方法会将元素的设定的固定高度和宽度也缩为一半，margin也是
我们在浏览器中看到的是宽高是一半，但是他的实际宽高还是固定的值，
所以不推荐。

2.利用伪元素：before

<div class='button2' >Login</div>
.button2{
            position: absolute;  //只要不是static就行
            width: 100px;
            height: 50px; 
            color: #fff;
            line-height: 50px;
            text-align: center;
            border-radius: 10px;
            letter-spacing: 0.1em;  
        }
.button2:before{
            content: '';
            position: absolute;   //必需
            left: 0;    //必需
            width: 200%;   //必需
            height: 200%;   //必需
            border: 1px solid #fff;    //必需
            transform-origin: 0 0;   //必需
            transform: scale(0.5,0.5);    //必需
            box-sizing: border-box;   //必需
            border-radius: 20px;    
        }

这种方法也有缺陷，比如要为按钮设置圆角，在伪元素中设置的必须为元素的2倍，而且两者都需要设置。元素表现的宽和实际的宽是一致的。