Javascript 翻转按钮答案

【问题标题】：Javascript rollover buttonJavascript 翻转按钮
【发布时间】：2013-08-31 01:23:06
【问题描述】：

如何制作像：http://www.ideabank.pl 这样的按钮？

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

在翻转时展开到顶部（动画）
更改文字

我是怎么做到的？

【问题讨论】：

您也可以仅使用 CSS 实现相同的效果。如果您使用 javascript，那么脚本将需要编辑 DOM 的 CSS。

标签： javascript css button css-transitions mouseover

【解决方案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;
}

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

【讨论】：