How to style a button inside an input tag

Question

Hey im trying to change this (working) line of code here:

     *<a href="DPS_Guitarspg3.html">        
        <button style="background-color:rgb(0,0,5)"; type="button"> <p style="color:rgb(111,0,100);">  Guitars</p></button> </a>*

Into an equivalent statement w this kind of format(utilizing a class) here:

*<a href="DPS_Guitarspg3.html">
<input type="button" class="inline" id="redirectButtons">
</a>*

My question is how/where to type in the colored text("Guitars") used in the aforementioned code block in the latter code block. Sorry if this is a bad question, I am awful with HTML. Thanks in advance.

Answer 1

Or, you can style the <a> tag to look/act like a button. Just use the :hover and :active, like this

.aBtn{
  padding:5px 10px;
  text-decoration:none;
  color:rgb(111,0,100);
  background-color:rgb(0,0,5);border:1px solid transparent;
}
.aBtn:hover {color:white;}
.aBtn:active{border:1px solid orange;}

<a class="aBtn" href="DPS_Guitarspg3.html">Guitars</a>