css/html buttons link not working
I have seen this question a lot in your forums but, all the answers and even the issues are far more advanced that my knowledge. I have just started learning html and css, so I came across this page: HTML CSS - Responsive buttons (grid) I liked the design so I decided to use it. Here is the problem: I am running Wamp64. Running a localhost server and database. However, I want the localhost/index.html page to give me the choice of going to different pages in the localhost using the buttons mentioned above. For example. I click "test 01" and it would take me to "http://localhost/test01", which in turn is connected to a different database. I clik on Test 2, and it would go to the test02 directory in localhost, connected to database test02, and so on. Using the code above I changed the href to my address (see below), but when I click them, nothing happens:
html:
<link rel="stylesheet" type="text/css" href="css/styles.css" >
<div class="middle">
<center>
<button type="button3" class="button3">
<a href="http://localhost/test01">Test 1</a>
</button>
<button type="button3" class="button3">
<a href="http://localhost/test02/index.php">Test 2</a>
</button>
<button type="button3" class="button3">
<a href="309.html">309</a>
</button>
<button type="button3" class="button3">
<a href="304.html">304</a>
</button>
<button type="button3" class="button3">
<a href="307.html">307</a>
</button>
<button type="button3" class="button3">
<a href="310.html">310</a>
</button>
<button type="button3" class="button3">
<a href="311.html">311</a>
</button>
<button type="button3" class="button3">
<a href="312.html">312</a>
</button>
</center>
</div>
And this is the CSS:
.button {
height: 40px;
width: 130px;
margin-bottom: 3%;
background-color: #7C8082;
font-size: 100%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
border-color: #ffffff;
}
.button:hover {
background-color: #474240;
font-family: 'Muli', sans-serif;
}
.button1 {
height: 40px;
width: 70px;
background-color: #7C8082;
font-size: 100%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
margin-top:5px;
}
.button1:hover {
background-color: #474240;
}
.button3 {
height: 80px;
width: 30%;
background-color: #7C8082;
font-size: 200%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
margin-top:10px;
}
.button3:hover {
background-color: #474240;
}
I have tried renaming the links, change the href to action OnClick, even the straight html of 'form method="link" action="http://localhost/test01/index.php> , but the only thing that happens is that, the button reacts to my click but doesn't redirect me. What am I doing wrong?
try it,
link rel="stylesheet" type="text/css" href="css/styles.css" >
<div class="middle">
<center>
<a href="304.html" class ="button3" >304</a>
<a href="309.html" class ="button3" > 309</a>
</center>
</div>
did it works ?
When you're doing <a href="307.html">307</a> only the "309" is the clickable link to the webpages and the buttons are basically doing nothing at all.
you can apply a button like style to these links by putting the class name in your links
You can try this below but you may need to update the css to your liking =
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<header id="header">
<div class="middle">
<center>
<a href="http://localhost/test01" class="button3">Test 1</a>
<a href="http://localhost/test02/index.php" class="button3">Test 2</a>
<a href="309.html" class="button3">309</a>
<a href="304.html" class="button3">304</a>
<a href="307.html" class="button3">307</a>
<a href="310.html" class="button3">310</a>
<a href="311.html" class="button3">311</a>
<a href="312.html" class="button3">312</a>
</center>
</div>
</html>
You dont have to place an a-tag between a button-tag . Its either a button or a link.
Check HTML button Tag on w3schools for more info.
<button type="button">Click Me!</button>上一篇: 我们如何链接一个HTML按钮？
下一篇: css / html按钮链接不工作