CODEWITHSUNDEEP
htmlcssbuttonhyperlinkhref
George Hammell
George Hammell

Reputation: 33

How to remove the blue underline and text when making a button with the href property?

So I am trying to make a button but I don't like it having a blue underline and blue text when I make it a link button, here's the code:

           <a class="button" href = "howtomakebread.html"> how to make bread!</a>
         </div>
       </div>



      div.breadbutton {
         background-color: black;
         width: 150;
         height: 25;
         text-align: center;
         margin: 10px;
         margin-top: 10px;
         padding: 10px;
         color: white;
         position:relative; top:-10px
       }```




That is the code itself, comment if I need to supply more of my code to fully answer this, thanks!

Upvotes: 1

Views: 1908

Answers (3)

Ernest Molner
Ernest Molner

Reputation: 90

You can simply do this: <a class="button" href = "howtomakebread.html" style = "text-decoration: none; color: black;"> how to make bread!</a>

But what you are making is a link not a button. If you one a make one use the button tag

<button type="button" href = "howtomakebread.html" style = "text-decoration: none; color: black;"> how to make bread!</button>

If you want to use a css file I recommend you make a separate css and call it in the head of your html.

Your html <button class="yourbutton" type="button" href = "howtomakebread.html" > how to make bread!</button>

your css

.yourbutton {
         text-decoration: none; 
         color: black;
       }

Upvotes: 0

Jam McOoter
Jam McOoter

Reputation: 26

The CSS property to remove underline is: text-decoration: none; and to make it not have blue text, simply set the color in CSS to any other color: color: white;. To use an rgb code: color: rgb(255, 255, 255);, and to use HEX: color: ffffff;

Upvotes: 1

thatguytyler
thatguytyler

Reputation: 171

There are quite a few issues with your code example.

  1. The class name "breadbutton" does not exist, your code has only the class "button"
  2. The CSS properties "height" and "width" should end in a measurement type: "150px"

To address your question more directly though, the CSS property to remove the underline is "text-decoration". In your example I'd use text-decoration: none;

Here is a code example with some modifications to do what I think you're intending. https://jsbin.com/qiyobimehe/edit?html,css,output

Upvotes: 0

Related Questions