CSS拟物按钮

<div class="btn">F</div>

.btn {margin: 150px 0 0 150px;display: flex;justify-content: center;align-items: center;width: 100px;height: 100px;background-color: #fff;border-radius: 20px;font-size: 50px;color: #333;/* 禁止选中文本 */user-select: none;cursor: pointer;transition: all 0.4s ease-in-out;text-shadow: 2px 2px 2px #ccc;box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.2), -20px -20px 30px rgba(225, 225, 225, 1);&:hover {font-size: 48px;box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(225, 225, 225, 0.8), inset 10px 10px 20px rgba(0, 0, 0, 0.1), inset -10px -10px 20px rgba(225, 225, 225, 1);}
}