I'm a student and the textbook I'm using is telling me to create a button by just making a link (<a href="myhome.html">Sign Up</a>) then styling it with CSS. It's affecting all of the links on every page, and even the navigation bar. The textbook was written when HTML5 was brand new.

 

The website I am working on is 5 pages, mainpage, myhome, forums, signup, and login. The only pages I need buttons on is signup and login, and both of those are supposed to go to myhome.

 

How do I make a button that I can format with CSS without it affecting every link on the website and the navigation bar?

 

Thank you

Edited March 2, 201412 yr by kbss

The book is correct. Use a class to apply a CSS style to only a subset of <a> elements:

 

<a class="button" href="myhome.html">sign up!</a>

Then use this CSS:

 

a.button{display: block;padding: 1em;margin: 1em;/* etc. */}

Using a link won't allow you to submit a form though (well, without JavaScript). So best to use <button> or <input type="submit" /> for forms, and you can style those in the same way.

 

You should be using classes on most elements on your website to enable you to style them individually. As you have seen, there's rarely any use in styling all elements in the same way other than to set some general global rules such as font, text size, etc..

 

Perhaps read up on CSS before continuing.

Edited March 2, 201412 yr by andy9l

Thank you so much! I didn't realize the problem was the form. I'm just going to take the login and signup pages out and replace them with something else because it'll still be within the guidelines for my assignment, and I was just trying to be an over-achiever (whenever I do that something always goes wrong).

The problem isn't the form, it's the fact you need to use classes on your elements to style them individually. You're going to have to use styles on any website.

 

Hope that helps.

I was using classes on my elements. Exactly as in the book,

a {border:2px solid black; background:silver; /*etc*/}

I tried it adding ".button" and it still didn't work until I moved where I was trying to put the button away from the form.

 

Why would it have been acting like buttons can't go with forms? I'm only using HTML and CSS, could that be why it did that?

You're not using a class in that code. You're applying that style to ALL <a> elements. A class should be explicitly defined in the HTML, then in the CSS.

 

I'm not sure what you mean by your second question?

html code for button link as given below:

 

<a href="#"><input type="button" name="button" value="submit"></a>

 

css code for button:

 

input {

border:2px solid #000;

background-color:#0099ff;

width:30px;

}

It's a good idea, especially with buttons to make them using multiple classes. I'll show you an example:

<a href="#" class="btn btn-brand btn-lg">CTA</a>

Your stylesheet could look something like:

 

.btn {
   display: inline-block;
   border-radius: 5px;
   color: white;
   text-decoration: none;
}

.btn-brand {
  background: #dd4444;
 }
.btn-brand:hover,
.btn-brand:focus {
   background: #cc3333;
}

.btn-alpha {
  background: #555555;
 }
.btn-alpha:hover,
.btn-alpha:focus {
   background: #444444;
}

.btn-sm {
  padding: 5px 10px;
}

.btn-md {
  padding: 8px 18px;
}

.btn-lg {
   padding: 10px 30px;
}

Now you can use a combination of classes to make up buttons. Building it this way will allow you to easily organise many different styles of buttons with a minimal amount of code. All the buttons should have the base class of .btn, then you can extend the class by addng the modifier classes.

 

Here using the styles is a button that looks totally different but still inheriting the base class. add in a few more modifier classes and the number of combinations expands exponentially. but crucially the css remains small and very easy to manage.

<a href="#" class="btn btn-alpha btn-sm">

Edited June 20, 201412 yr by rbrtsmith

html code for button link as given below:

 

<a href="#"><input type="button" name="button" value="submit"></a>

 

css code for button:

 

input {

border:2px solid #000;

background-color:#0099ff;

width:30px;

}

 

This markup is incorrect, a button is a form element and cannot be wrapped in an anchor. the proper markup for a forms submit button is

<button type="submit" class="something">Submit</button>

You don't wanna be going with <input type="submit"> because you are far more limited on what styling you can apply, so better to go with the example above..

or going inline with my previous post:

<button type="submit" class="btn btn-md btn-brand">Login</button>