.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }
![CSSで作る!押したくなるボタンデザイン100(Web用)](https://cdn-ak-scissors.b.st-hatena.com/image/square/7465c19ce3d218d77f68a72b4b8f0485407b4f88/height=288;version=1;width=512/https%3A%2F%2Fsaruwakakun.com%2Fwp-content%2Fuploads%2F2017%2F04%2F69269-OCNX42-444-01.png)