Buttons

After using the following element <a href=“index.html”>Home<a/>

What element do I use to add a button to this link?

Your help is appreciated

Regards

Paul Oliver

Hi Paul. I gather what you want to do is make this link look like a button, which is quite easy. You can use CSS to style the link any way you like, or you can use an image instead. What do you want it to look like?

Hi Ralph,
That is exactly it-make the link look like a button. I would like the button to be rectangular.

Thanx for your help Ralph.

Regards

Paul

OK, that’s easy enough, but it would be handy to know the context. Is this button on its own or in a sentence or …? What is the surrounding code?

Basically, you can do something like put padding on the <a>, a background color, a border etc. Very straightforward. Happy to provide an example with more information (or a creen shot etc.)

Hi Ralph,

<h4>
<a href=“Home.html”>WATERPROOF HOME</a>
<a href=“Systems.html”>WATERPROOF SYSTEM</a>
<a href=“Contact.html”>WATERPROOF CONTACT</a>
</h4></br>

I hope this helps

Regards

Paul

And are those to be vertical or horizontal? Either way, the markup to use is as follows:

<ul>
    <li><a href="Home.html">WATERPROOF HOME</a></li>
    <li><a href="Systems.html">WATERPROOF SYSTEM</a></li>
    <li><a href="Contact.html">WATERPROOF CONTACT</a></li>
</ul>

Here’s an example of those links styled as a horizontal menu:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Menu</title>
	
<style media="all">
.menu {list-style: none; margin: 0; padding: 0; overflow: hidden;}
.menu li {float: left;}
.menu li + li {border-left: 2px solid #fff;}
.menu a {display: block; line-height: 2em; padding: 0 30px; background: #e7e7e7; text-decoration: none; color: #30353b;}
.menu a:hover, .menu a:focus {background: #30353b; color: white;}
</style>
	
</head>
<body>

<ul class="menu">
	<li><a href="Home.html">WATERPROOF HOME</a></li>
	<li><a href="Systems.html">WATERPROOF SYSTEM</a></li>
	<li><a href="Contact.html">WATERPROOF CONTACT</a></li>
</ul>

</body>
</html>

Paste that code into a .html file and open it in your browser to see the results. Hope that helps. :slight_smile:

Hi Ralph,

Thanks for the help. I resolved this issue I place this element in the wrong position <BUTTON TYPE=“button”> </BUTTON> this must be in an inline position.

Take care

Paul

Buttons are not the best element for this. Do have a look at the code above, as this is the preferred code for a menu. :slight_smile:

Thankx Ralph I’ll test the code

Thanks for your help

Regards

Paul