Объемная кнопка

С помощью радиального градиента, тени и закругления углов можно создавать реалистичные объёмные кнопки.

Исходный код этого примера:

<style>
    .wrap {
        width: 600px;
        height: 100px;
        padding: 50px 0;
        background: #ccc;
    }
    button {
        display: block;
        border: none;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 0 auto;
        background: radial-gradient(farthest-side at top left, #fff, #aaa);
        box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5);
    }
</style>
<div class="wrap">
    <button></button>
</div>