Kevin Powell - Community•11mo 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 HobberzOP•11mo 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•11mo 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 HobberzOP•11mo 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•11mo ago

glad to help!

RIZE HobberzOP•11mo ago

RIZE HobberzOP•11mo ago

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

RIZE HobberzOP•11mo 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•11mo 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 HobberzOP•11mo 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•11mo ago

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

RIZE HobberzOP•11mo ago

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

Jochem•11mo ago

buttons are for actions on the same page

RIZE HobberzOP•11mo ago

like from my files

Jochem•11mo ago

or for submitting forms

RIZE HobberzOP•11mo ago

what no way did i use href for my nav bar?

Jochem•11mo ago

yeah

RIZE HobberzOP•11mo ago

oh yeah shi so i need to do that code u showed me but how would i do it for the href

Jochem•11mo ago

you can probably just replace the <button> with <a href="#"> (the # can work as a placeholder, though you shouldn't put that through to production) and </button> with </a>

RIZE HobberzOP•11mo ago

Ive done this but how would i do the css so it looks the same as it did just for the href

Jochem•11mo ago

I'm not great at picturing html and css without having it in my browser, but I'm guessing the text is blue and underlined?

RIZE HobberzOP•11mo ago

yeah

Jochem•11mo ago

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

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

try that are you looking at these and trying to understand what they're doing btw, or just copy/pasting?

RIZE HobberzOP•11mo ago

im trying to learn while reading it and im understanding alot of it and being able to implement it to other parts of my code

Jochem•11mo ago

good! 🙂

RIZE HobberzOP•11mo ago

its my way of learning lol then i use it so much times it gets cemented in my head

RIZE HobberzOP•11mo ago

this is so cool Ive learnt so much today!

Jochem•11mo ago

looks good!

RIZE HobberzOP•11mo ago

i managed to use a subdomain aswell so when its done i can use that ik sudomains arent the best but theyre a good replacement if u dont have money for a website thanks so much for the compliment Yo @Jochem this is the website so far https://rlsp00kytestweb.netlify.app/

Jochem•11mo ago

looks good, good job on getting it deployed!

RIZE HobberzOP•11mo ago

Its only a test one atm U done most of the work lol Wont have to ask as much next time though Yo i put my #SEARCH BAR (the thing ive been dodging) in front end is that correct Looking at trying to make the discord and twitch tabs look neater I dont know how tho Im very stupif resolved

Gaming

Programming

Button Styling