Question

如何制作如下按钮：http://www.ideabank.pl？

我正在谈论的按钮是主横幅下面的9个按钮。

展开（动画）
更改文字

我该如何制作？

Answer 1

基本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;
}

转换采用您要应用转换的属性，持续时间和时间函数

Javascript翻转按钮

1 个答案: