javascript - Javascript 翻转按钮

Question

我如何制作一个按钮，例如：http ://www.ideabank.pl ？

我所说的按钮是主横幅下方的 9 个按钮。

• 翻转时展开到顶部（动画）
• 更改文本

我该怎么做？

Answer 1

这是JSfiddle

基本的 HTML 是

<div id="box">
    <a href='#'>
        <div class="col_inside">
            <span class="span-inside">Button</span>
        </div>
    </a>
</div>

有一个包含链接 div 的框。这个 div 成为按钮，因为它被包裹在标签中。

CSS

#box {
    width: 600px;
    height: 240px;
    background: black;
    position: relative;
}
.col_inside {
    position: absolute;
    bottom: 0;
    width: 600px;
    height: 60px;
    transition: height 0.5s linear;
    background: #0096de;
    text-align: center;
}
.col_inside .span-inside:last-child {
    display: none;
}
.col_inside:hover {
    height: 90px;
}

.col_inside:hover span:first-child {
       display: none;
}

.col_inside:hover span:last-child {
    display: inline-block;
}
.span-inside {
    display: inline-block;
    margin: 20px;
    text-decoration: none;
    color: white;
}

您最感兴趣的部分是

.col_inside {
    height: 60px;
    transition: height 0.5s linear;
}
.col_inside:hover {
   height: 90px;
}

过渡采用您要应用过渡的属性、持续时间和计时功能