Как укладывать кнопки внутри входного тега

Question

Привет им пытаются изменить это (рабочий) строку кода здесь:

 *<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>* 

В эквивалентное заявление ж такого формата (с использованием класса) здесь:

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

Мой вопрос в том, как/где вводить цветной текст («Гитары»), используемый в вышеупомянутом кодовом блоке в последнем кодовом блоке. Извините, если это плохой вопрос, я ужасен с HTML. Заранее спасибо.

Answer 1

Или вы можете нарисовать тег <a>, чтобы выглядеть/действовать как кнопка. Просто используйте :hover и :active, как этот

.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>

Answer 2

Вы хотите, чтобы кнопка функционировала как гиперссылка. Чтобы дать вам полный контроль над стилем, вы можете сделать кнопку файлом изображения и поместить файл изображения в свою гиперссылку.

<a href="DPS_Guitarspg3.html"> 
    <img src="image-of-button.png"> 
</a> 

В качестве альтернативы вы можете использовать библиотеку front-end, такую ​​как Bootstrap.