Hello,

I am trying to make the login button thinner. Like a clickable image. Is it possible?

This is the code that I have (below). The result is a thick clickable button. Is it possible to make it a thin image - not thick (I do not want to see the button border).

index.php

<div id="banner-background">
<div style="margin: 118px 0 0 310px; position: absolute; z-index: 3;">
<form action="login.php" method="POST">
<input type="text" class="form" name="username"><br>
<input type="password" class="form2" name="password"></div>
<input type="submit" class="login" name="submit" value=""></input></div>
<div style="margin: -235px 0 0 850px;"><a href="create_account.php">Create an Account</a><br><a href="forget_password.php">Forgot Password</a></div>
<div style="margin: 20px 0 0 630px;"><input type="checkbox" name="keeplogin" value="Keep me logged in">Keep me logged in<br></div>
</form>

Recommended Answers

All 4 Replies

<input type="image" src="submit.gif" alt="Submit" width="48" height="28"> that should work

It is always a good idea to do your styling in a CSS file, as otherwise it clutters up your code (and search engines hate it).

As @edbr says, just adjust the height of the image to squash it a bit thinner.

(I do not want to see the button border).

Is this part of the image? If so, you need to do your image again and remove it. If not, then remove any CSS that might cause this.

Hey, I try this:

index.php

<div id="banner-background">
<div style="margin: 118px 0 0 310px; position: absolute; z-index: 3;">
<form action="login.php" method="POST">
<input type="text" class="form" name="username"><br>
<input type="password" class="form2" name="password"></div>
<!--<input type="submit" class="login" name="submit" value=""></input>-->
<input type="image" src="images/login.jpg" alt="submit">
</div>
<div style="margin: -235px 0 0 850px;"><a href="create_account.php">Create an Account</a><br><a href="forget_password.php">Forgot Password</a></div>
<div style="margin: 20px 0 0 630px;"><input type="checkbox" name="keeplogin" value="Keep me logged in">Keep me logged in<br></div>
</form>

If I use this code, how to pass the following condition since the input type is image not submit:

login.php

if (isset($_POST['submit'])) {

/* the files */

two ways you can do what you wanted.

first, can do it with javascript.
second, add this above your image submit button

<input type="hidden" name="submit" />
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.