Jump to content

Make a css3 html5 button redirect to a link :p

WillLTT
 Share
Posted

HTML

<!doctype html>
<html lang=en>
<head>
<title>Skotoma</title>    
<link href="style6.css" rel="stylesheet" type="text/css">

</head>
<body>
    <header>
    
    <div class="login-box">
    <img src="avatar.png" class="avatar">
        <h1>Login</h1>
            <form>
            <p>Username</p>
            <input type="text" name="username" placeholder="Enter Username">
            <p>Password</p>
            <input type="password" name="password" placeholder="Enter Password">
            <input type="submit" name="submit" value="Login">
            <a href="file:///C:/Users/Willi/Desktop/CSS%20HTML%20project/index.html">Forgot Password</a>    
            </form>
             
        </div>    
    
    </header>

</body>

 

css

 

body{
    margin: 0;
    padding: 0;
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(UNIVERSAL.jpg);
height: 100vh;
background-size: cover;
background-position: center;
    font-family: sans-serif;
}
.login-box{
    width: 320px;
    height: 420px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
    box-sizing: border-box;
    padding: 70px 30px;
}
.avatar{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: -50px;
    left: calc(50% - 50px);
}
h1{
    margin: 0;
    padding: 0 0 20px;
    text-align: center;
    font-size: 22px;
}
.login-box p{
    margin: 0;
    padding: 0;
    font-weight: bold;
}
.login-box input{
    width: 100%;
    margin-bottom: 20px;
}
.login-box input[type="text"], input[type="password"]
{
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
}
.login-box input[type="submit"]
{
    border: none;
    outline: none;
    height: 40px;
    background: #1c8adb;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
}
.login-box input[type="submit"]:hover
{
    cursor: pointer;
    background: #39dc79;
    color: #000;
}

.login-box a{
    text-decoration: none;
    font-size: 14px;
    color: #fff;
}
.login-box a:hover
{
    color: #39dc79;
}

 

 

what i need help for

make the button "Login button" work, make it redirect to file:///C:/Users/Willi/Desktop/CSS%20HTML%20project/index.html 

 

also i dont know really if this is allowed to post in this forum but w3schools is awaiting

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Ok before we start is this will be on your pc only? or you put in remote server?

 

Also quick answer would be:

put this file same location as 

<!doctype html>
<html lang=en>
<head>
<title>Skotoma</title>    
<link href="style6.css" rel="stylesheet" type="text/css">

</head>
<body>
    <header>
    
    <div class="login-box">
    <img src="avatar.png" class="avatar">
        <h1>Login</h1>
            <form>
            <p>Username</p>
            <input type="text" name="username" placeholder="Enter Username">
            <p>Password</p>
            <input type="password" name="password" placeholder="Enter Password">
            <input type="submit" name="submit" value="Login">
            <a href="file:///C:/Users/Willi/Desktop/CSS%20HTML%20project/index.html">Forgot Password</a>    
            </form>
             
        </div>    
    
    </header>

</body>
</html>

as index.html

AND then change: 

 <a href="file:///C:/Users/Willi/Desktop/CSS%20HTML%20project/index.html">Forgot Password</a>
TO:
 <a href="index.html">Forgot Password</a>

And you good to go.

Here is your code mypage.rar

CPU: Intel I7-8700K | Motherboard: Gigabyte Aorus Z390 Master | RAM: Corsair Vengeance 3000Mhz 2x8GB | GPU: Asus ROG 1080Ti OC | PSU: Seasonic Prime 650W Titanium | SSD: 1x Samsung Evo 970 250GB M2 1x Samsung Evo 970 1TB M2 | CPU COOLER: Noctua D15

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

my pc only.

it think i may made my point a little unclear. (no hate)

i wanted the Login blue button to redirect me to index.html

not the "forgot password" button 

Capture.PNG

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
17 minutes ago, ughiwanthackintosh said:

my pc only.

it think i may made my point a little unclear. (no hate)

i wanted the Login blue button to redirect me to index.html

not the "forgot password" button 

Capture.PNG

yours href links are incorrect, so if your login page is same place as index.html your href should look like href="index.html"

CPU: Intel I7-8700K | Motherboard: Gigabyte Aorus Z390 Master | RAM: Corsair Vengeance 3000Mhz 2x8GB | GPU: Asus ROG 1080Ti OC | PSU: Seasonic Prime 650W Titanium | SSD: 1x Samsung Evo 970 250GB M2 1x Samsung Evo 970 1TB M2 | CPU COOLER: Noctua D15

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

yeah so i understood the fact of the hrefs im just wondering how to get the button to work, there is no href to put a link in,

exuse me that im kind of hopeless but im not pro in css html yet.

where can it put the href incase if i need to put it in

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 hour ago, speed258 said:

yours href links are incorrect, so if your login page is same place as index.html your href should look like href="index.html"

so for posting 2 times.

i simply wanted to add a href to my button

and so far ive been told to fix my existing href's

correct me if im wrong

and sorry for misunderstanding if i did..

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
6 minutes ago, ughiwanthackintosh said:

yeah so i understood the fact of the hrefs im just wondering how to get the button to work, there is no href to put a link in,

exuse me that im kind of hopeless but im not pro in css html yet.

where can it put the href incase if i need to put it in

 

 

1 minute ago, ughiwanthackintosh said:

so for posting 2 times.

i simply wanted to add a href to my button

and so far ive been told to fix my existing href's

correct me if im wrong

and sorry for misunderstanding if i did..

 

Hey we have to start somewhere right? :) 

 

Check my uploaded code it has folder so you can understand how links work in folders.

 

Great page for html tutorials: https://www.w3schools.com/Html/html_links.asp 

 

Also good advice is to use BootStrap which speeds up page styling: http://getbootstrap.com/

 

Also use notepad++ great tool: https://notepad-plus-plus.org/?

 

If you ever need work with javascript or php or other webpage languages use: https://www.jetbrains.com/phpstorm/ < currently using as my favourite tool

mypage.rar

CPU: Intel I7-8700K | Motherboard: Gigabyte Aorus Z390 Master | RAM: Corsair Vengeance 3000Mhz 2x8GB | GPU: Asus ROG 1080Ti OC | PSU: Seasonic Prime 650W Titanium | SSD: 1x Samsung Evo 970 250GB M2 1x Samsung Evo 970 1TB M2 | CPU COOLER: Noctua D15

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 hour ago, speed258 said:

hey we have to start somewhere right?

yes  :)
 

 

1 hour ago, speed258 said:

Also use notepad++ great tool: https://notepad-plus-plus.org/?

already using this tool :)

 

also thanks alot for the help :D

 

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 hour ago, speed258 said:

Check my uploaded code it has folder so you can understand how links work in folders

yes i understand how to work with folders now i dont have to use to those strange web page links :)

but back to how to make the button work

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
On 2018-09-21 at 8:26 PM, ughiwanthackintosh said:

have you given me up 

I didnt, Like I said use bootstrap and its already has styled buttons for you: https://www.w3schools.com/bootstrap/bootstrap_buttons.asp

CPU: Intel I7-8700K | Motherboard: Gigabyte Aorus Z390 Master | RAM: Corsair Vengeance 3000Mhz 2x8GB | GPU: Asus ROG 1080Ti OC | PSU: Seasonic Prime 650W Titanium | SSD: 1x Samsung Evo 970 250GB M2 1x Samsung Evo 970 1TB M2 | CPU COOLER: Noctua D15

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

@speed258

 

Alright, you've picked a kind of difficult place to start. You're working with a form with a number of inputs. And by what I understand you want to be redirected when hitting the login button, correct?

 

Here's what you have to do:

In the <form> element, add a "action" tag. This will redirect you when clicking the login button: 

<!-- the "method"-tag defines how we transmit the data. We can either GET or POST the data, check google to see the difference. We'll POST it for now -->
<form action="whereverYouWantToBeRedirectedTo" method="POST">
            <p>Username</p>
            <input type="text" name="username" placeholder="Enter Username">
            <p>Password</p>
            <input type="password" name="password" placeholder="Enter Password">
            <input type="submit" name="submit" value="Login">
            <a href="file:///C:/Users/Willi/Desktop/CSS%20HTML%20project/index.html">Forgot Password</a>    
</form>

The difference to just a normal link redirect is, that this will also transmit the content of your input fields. Accessing said data won't be possible with pure HTML, maybe look into PHP for that.

 

Here's a quick script I threw together to check a password in PHP. It will use the data we enter into the form we created earlier. 

<?php

	//variables are created with a $-Sign in front of the name
	$username; //<- this is now a variable
	
	//we'll now create and fill all the variable with the data from the form
	$username = $_POST["username"]; //The $_POST[] variable is an array containing all the data we transmitted from the form. The index is the name of your input in the HTML file
	$password = $_POST["password"];

	//we now have both the username and password, let's check them
	//only continue for certain users
	if ($username == "testuser") {
      //let's say the password for the testuser is 1234
      if ($password == "1234") {
        //the password is correct
        echo "You're logged in";
      } else {
        //the password is not correct
        echo "Incorrect password";
      }
    } else if ($username == "testadmin") {
      //let's say the password for the testadmin is admin
      if ($password == "admin") {
        //the password is correct
        echo "Welcome admin!";
      } else {
        //the password is not correct
        echo "Incorrect password";
      }
    } else {
      //the username is unknown
      echo "Unknown username";
    }

?>

Save this script as "login.php" or whatever the filename should be and point your form (in the action tag) to this script and you should be good to go. Keep in mind, that this is a very basic version of a login, but it's a good place to start.

 

If you have any more questions, don't hesitate to hit me up ^^

75% of what I say is sarcastic

 

So is the rest probably

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programs, Apps and Websites

×