Html css悬停效果按钮

Question

我想创建一个按钮，其效果类似于该视频中显示的按钮。 “https://www.loom.com/share/2c536d14a94741068c2ff5f3e9b97040?sid=11865ac3-23fb-4da2-af97-e587d46ee564”。当用户将鼠标悬停在“加入时事通讯”按钮上时，就会出现我想要的效果。

截至目前，我已经为这个问题创建了一个codepan，但仍然没有得到最终结果。

button{
    display: inline-block;
    flex-direction: column;
    margin: 10px;
    padding: 10px;
    background-color: #fdccaa;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: black;
    border: 1px solid black;
    /* width: 50%;
    transition: background-color 0.3s ease;
    box-shadow: 20px 20px 2px 2px transparent, 3px 3px 1px #1b1a1a; */
    line-height: 1.5 !important;

}

button:hover{
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);
    transform: translate(2px, 2px);
    transition: transform 0.3s ease;
    background: #fdccaa !important;
    color: #000 !important;

}

<button>Join Newsletter</button>

请检查我的小提琴，让我知道我缺少什么。

Answer 1

考虑将按钮嵌套在 div 中并为其添加边框：

div{
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
    border-radius: 5px;
    padding: -2px;
    width: 114px;
    height: 42px;
}

button{
    display: inline-block;
    flex-direction: column;
    margin: 0;
    padding: 10px;
    background-color: #fdccaa;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: black;
    border: 1px solid black;
    /* width: 50%;
    transition: background-color 0.3s ease;
    box-shadow: 20px 20px 2px 2px transparent, 3px 3px 1px #1b1a1a; */
    line-height: 1.5 !important;

}

button:hover{
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);
    transform: translate(2px, 2px);
    transition: transform 0.3s ease;
    background: #fdccaa !important;
    color: #000 !important;

}

<div>
    <button>Join Newsletter</button>
</div>

我还删除了按钮上的边距，使其更靠近 div 的边框。