• Locked
1 reply [Last post]
Tue, 2012-02-07 22:56
justinmont
Offline
Last seen: 1 year 14 weeks ago
newbie
Timezone: GMT-8
Joined: 2012-02-07
Posts: 1
Points: 2

Hi there-

I'm in the process of creating a button that expands upon hover. The idea is to have the button expand to the right and down to reveal additional content such as links, etc. I've got a working button created that expands to the right, but I can't get it to expand down as well. It seems to be limited by the height of the button itself.

First, here's the HTML driving the button itself:

<div class="container" id="container">
            <div class="buttons">
                <a href="#" class="but2">
                    <span class="title">static button text</span>
                    <span class="extra"><span>Expanded content here</span></span>
                    <span class="icon"></span>
                </a>
            </div>
        </div>

Second, here's the CSS I'm using:

.but2{
    border-radius:25px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
 
    background-color:#99cc99;
    float:left;
    height:60px;
    margin:10px;
    overflow:hidden;
    padding-left:20px;
    position:relative;
    text-decoration:none;
 
    transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    -webkit-transition:all 0.5s linear;
    top: 295px;
    left: 75px;
    z-index: 1000;
}
.but2 .title{
    color:#000000;
    display:block;
    float:left;
    font-size:24px;
    font-weight:bold;
    line-height: 60px;
    text-align: center;
 
    transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    -webkit-transition:all 0.2s linear;
}
.but2 .extra{
    background-color:#63707e;
    color:#fff;
    float:left;
    font-size:18px;
    line-height:40px;
    opacity:0;
    position:relative;
    width:0px;
 
    transition: all 67s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    -webkit-transition: all .3s linear;
}
.but2 .extra span, .but2 .extra input {
    display:none;
}
.but2 .icon{
    background:transparent url(../images/right.png) no-repeat center center;
    float:left;
    height:40px;
    width:40px;
 
    transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    -webkit-transition:all 0.3s linear;
}
.but2:hover .extra span, .but2:hover .extra input{
    display:inline-block;
}
.but2:hover .extra{
    margin-left:10px;
    opacity: 1;
    padding-left:10px;
    padding-right:10px;
    text-align:center;
    width:450px;
    height:60px
}
.but2:hover .icon{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
}

Top
Tags:
Wed, 2012-02-08 03:38
#1
bijayjoshi
bijayjoshi's picture
Offline
Last seen: 30 weeks 6 days ago
Regular
Patan, Nepal
Timezone: GMT+5.75
Joined: 2012-02-06
Posts: 28
Points: 30

Hi justinmont, .but2 has

Hi justinmont,
.but2 has overflow: hidden defined to it. and anchor tags and span tags are inline by default.
Using display:block for inline elements can help. Please try with these hints and reply.

cheers.

Bijay Josi
Loves Open Web.
Contributor @ wiqim.com, An IT/Web Magazine.
Tweets @wiqim

Top
  • Locked