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,
did it works ?