button

[davy_yg]

Hello,

I am looking for a sign-in button like this: button

any clue how to create one like that?

Thanks in advance.

[diafol]

<a id="loginBtn" style="position: relative;z-index:2;" class="greenBtn glyphicon glyphicon-lock" href="#"><span>Sign In</span></a>

http://glyphicons.com/

Frameworks like Twitter Bootstrap use them. Have a look. I'm sure you can figure it out.

[davy_yg]

I don't think the bootstrap thing give answer.

How to create a sign in button that when you click it then a drop down down box appears?

[diafol]

Well, you need to be clearer with your requests.

The title is just 'button' which is of no help whatsoever.
The question is misleading as you asked how to create a sign-up button like the one in the link. From looking at the site, you see an icon with text. I didn't think that we were supposed to actually click on the button. And even if we did, how were we supposed to know that you were interested in the dropdown?
Maybe the use of tags in the post would have helped too.

Help others to help you. This just frustrates and annoys would-be contributors. Good luck with it.

[davy_yg]

yes, I am interested in the dropdown. a button that can show a drop down when someone click on it. The drop down must also show a form that someone can filled-in.

How to create such a thing?

[Tpojka]

Try to look the code in first place.
I am very satisfied with Google Chrome right click Inspect element context
option. If you check it, you will see that login form is just div css-ed with
display: none; rule. With JS/jQuery you can make the magic removing that rule (class) or adding it again on click or triggering anyway you want.

[davy_yg]

Is it the same like creating normal drop down menu?

[DJBirdi]

lol @ "button" ... I had to check this thread out.

Here ya go bud, I created a quick sample for you. This should get you started. Click the "Sign In" button and you'll see your container slide down, then go ahead and fill that container with a regular <form>.

http://jsfiddle.net/jq2eG/

[davy_yg]

hello,

thx for helping.

index.html

<div id="wrapper1">
                    <div class="language">
                    <b>English &nbsp;|&nbsp; Indonesia</b><br><br><br>
                    </div>
                    <div class="login_box">
                        Email:<input type="text" size="5"    name="judul"><br>
                        Password:<input type="password" size="5" name="judul"><br>
                        Forget Password<br><br>
                        <button type="button">Sign-in</button><br>
                        <button type="button">Create Account</button><br>
                    </div>
                    <div class="nav">
                        <div class="btn" id="login">Sign In</div>
                    </div>  
                    <br><br>      
                </div>

style.css

/*sign-in button--------------------*/
#wrapper2 {
    width:200px;
    height:200px;
    border:1px solid red;
    overflow:hidden;
    position:relative;
}

.language {
    margin: -100px 0 0 840px;
}

.nav {
    width:200px;
    height:50px;
    border:0px solid red;
    margin: 20px 0 0 750px;
}

.btn {
    float:right;
    margin:5px 0 0 5px;
    width:100px;
    height:25px;
    display:inline-block;
    border:1px solid blue;
    text-align:center;
}

.login_box {
    position:absolute;
    top:145px;
    left: 945px;
    width:200px;
    height:200px;
    background-color:#FF0000;
    display:none;
    z-index: 5;
}
/*end sign-in button----------------*/

This should be simple. I wonder why I cannot change the size of the input textbox. No matter how much I change the size the size appearance still remains the same. This is strange unlike what happen usually.

[davy_yg]

Hello nevermind. I find the answer regarding the textbox things. Define textbox size in on of the css might overlap my index textbox definition.

Now, how to program when someone click the background the dropdownbox disappeared ?

Thanks in advance.

[tapananand]

Add an onBlur handler in the div containing the dropdown and hide the dropdown in it.

[davy_yg]

Also how to fix the button link:

<button type="button" class="button" onClick="document.location.href('http://localhost/www.google.com');">Create Account</button><br>

I try to click the link but the new window does not appears. Is my code correct?

[tapananand]

change it to this:

    <button type="button" class="button" onClick="window.location.href = 'http://localhost/www.google.com';">Create Account</button><br>