Kevin Powell - Community•8mo ago

Button Styling

I want a see through button with a red border and text in the middle and all of the buttons the same width and the text in them centered. Then when u hover over it it fills it red and the text turns white

33 Replies

RIZE Hobberz•8mo ago

<!DOCTYPE html>
<html>
<head>
  <title>RLSp00ky Songs - Twitch</title>
  <link rel="stylesheet" type="text/css" href="Songs.css">
  <script src="https://kit.fontawesome.com/67c66657c7.js"></script>
</head>
<body>
  <input type="checkbox" id="check">
  <nav>
    <div class="icon"><b style="color: red;">RL</b>SpOOky <b style="color: red;">S</b>ongs</div>
    <div class="search_box">
      <input type="search" placeholder="Search...">
      <span class="fa fa-search"></span>
    </div>
    <ol>

      <li><a href="../index.html">Home</a></li>
      <li><a href="discord.html">Discord</a></li>
      <li><a href="twitch.html">Twitch</a></li>
      <li><a style="border-bottom:3px solid rgb(255, 0, 0)">Songs</a></li>

    </ol>
    <label for="check" class="bar">
      <span class="fa fa-bars" id="bars"></span>
      <span class="fa fa-times" id="times"></span>
    </label>
  </nav>

  </div>
  <section></section>
  <div class="button">
    <button>MASKED - RLSP00KY</button><br>
    <button>WHO? - RLSP00KY</button><br>
    <button>BROKE - RLSP00KY</button><br>
  </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>RLSp00ky Songs - Twitch</title>
  <link rel="stylesheet" type="text/css" href="Songs.css">
  <script src="https://kit.fontawesome.com/67c66657c7.js"></script>
</head>
<body>
  <input type="checkbox" id="check">
  <nav>
    <div class="icon"><b style="color: red;">RL</b>SpOOky <b style="color: red;">S</b>ongs</div>
    <div class="search_box">
      <input type="search" placeholder="Search...">
      <span class="fa fa-search"></span>
    </div>
    <ol>

      <li><a href="../index.html">Home</a></li>
      <li><a href="discord.html">Discord</a></li>
      <li><a href="twitch.html">Twitch</a></li>
      <li><a style="border-bottom:3px solid rgb(255, 0, 0)">Songs</a></li>

    </ol>
    <label for="check" class="bar">
      <span class="fa fa-bars" id="bars"></span>
      <span class="fa fa-times" id="times"></span>
    </label>
  </nav>

  </div>
  <section></section>
  <div class="button">
    <button>MASKED - RLSP00KY</button><br>
    <button>WHO? - RLSP00KY</button><br>
    <button>BROKE - RLSP00KY</button><br>
  </div>
</body>
</html>

thats the html

Jochem•8mo ago

remove the <br> tags from the div with class button, then do this

.button {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}
button {
  background: transparent;
  border: 1px solid red;
  text-align: center;
}
button:hover {
  background: red;
  color: white;
}

.button {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}
button {
  background: transparent;
  border: 1px solid red;
  text-align: center;
}
button:hover {
  background: red;
  color: white;
}

RIZE Hobberz•8mo ago

when i want the cursor to be the hand with the finger sticking out do i just put cursor: pointer; to the .button one or only to the hover dw i resolved it to the hover works fine for me thank you

Jochem•8mo ago

glad to help!

RIZE Hobberz•8mo ago

RIZE Hobberz•8mo ago

ive made it listed ima go back to transparent though bc i ruined it

RIZE Hobberz•8mo ago

only issue is this i could add one of those bars where its like page 1 2 3 4 5 ect would that resolve it

Jochem•8mo ago

are you ever going to have that many buttons? But yes, that would solve it. It's called pagination, and it's probably best to look up a tutorial for that. Keep in mind though that it's going to involve javascript

RIZE Hobberz•8mo ago

it depends on how many songs i write eventually but ill ask when we get there lol Now i gotta work on the bit i was dreading the most lmao 1 more thing how do i add links to the buttons i forgot

Jochem•8mo ago

you shouldn't use buttons to link to other pages, those should be anchor tags (<a href...)

RIZE Hobberz•8mo ago

as in so u click it and it loads a new page

Jochem•8mo ago

buttons are for actions on the same page

RIZE Hobberz•8mo ago

like from my files

Jochem•8mo ago

or for submitting forms

Gaming

Programming

Button Styling