Kevin Powell - Community•2y 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

HobberzOP•2y 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•2y 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;
}

HobberzOP•2y 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•2y ago

glad to help!

HobberzOP•2y ago

HobberzOP•2y ago

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

HobberzOP•2y 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•2y 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

HobberzOP•2y 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•2y ago

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

HobberzOP•2y ago

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

Jochem•2y ago

buttons are for actions on the same page

HobberzOP•2y ago

like from my files

Jochem•2y ago

or for submitting forms

HobberzOP•2y ago

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

Jochem•2y ago

yeah

HobberzOP•2y ago

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

Jochem•2y 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>

HobberzOP•2y ago

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

Jochem•2y 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?

HobberzOP•2y ago

yeah

Jochem•2y 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?

HobberzOP•2y 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•2y ago

good! 🙂

HobberzOP•2y ago

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

HobberzOP•2y ago

this is so cool Ive learnt so much today!

Jochem•2y ago

looks good!

HobberzOP•2y 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•2y ago

looks good, good job on getting it deployed!

HobberzOP•2y 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

Did you find this page helpful?