CODEWITHSUNDEEP
htmlcss
user7887481
user7887481

Reputation: 69

After CSS styling a button, the text is not showing up

I am currently trying to learn some HTML and CSS for fun and made what I think a pretty cool button for my "enter page" but after adding the last effects the text does not show up. after removing the "border-left,right,top" the text shows but the box loses the full effect. I currently have the button set up to display in the center of the screen while I have a background image that takes the full page up. The colors are meant to be similar to work with the background image and i have checked they shouldn't blend into each other

CSS Code

input.Button {
  text-align: center;
  position: absolute;
  top: 50%;
  width: 40%;
  height: 100px;
  margin-left: 30%;
  margin-right: 30%;
  background: #000000;
  color: #000000;
  opacity: 0.3;
  font-size: 400%;
  color: snow;
  font-family: "Impact", Charcoal, serif;
  letter-spacing: 0.3em;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid slategray;
}

Edit: HTML Code

<body>
  <div class="image">
    <img src="landingpage.jpg">
    <div class="button">
     <form>
       <input class="Button" type="button" value="Enter" onclick="window.location.href='about.html'" />
     </form>
   </div>
  </div>
</body>


input.Button {
  text-align: center;
  position: absolute;
  top: 50%;
  width: 40%;
  height: 100px;
  margin-left: 30%;
  margin-right: 30%;
  background: #000000;
  color: #000000;
  opacity: 0.3;
  font-size: 400%;
  color: snow;
  font-family: "Impact", Charcoal, serif;
  letter-spacing: 0.3em;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid slategray;
}
<body>
  <div class="image">
    <img src="landingpage.jpg">
    <div class="button">
      <form>
        <input class="Button" type="button" value="Enter" onclick="window.location.href='about.html'" />
      </form>
    </div>
  </div>
</body>

Upvotes: 1

Views: 1712

Answers (2)

Itay Gal
Itay Gal

Reputation: 10834

Not sure it's the best way to implement this, but you can wrap your button with 2 divs. The first div will be in charge of the positioning in the page. The second div will only have position: relative so you can position your button with absolute and it will be calculate based on the wrapper position and not the body.

Then position the button with top: -90px which will hover above your styled div.

input.Button {
  text-align: center;
  font-size: 400%;
  color: snow;
  font-family: "Impact", Charcoal, serif;
  letter-spacing: 0.3em;
  position: absolute;
  top: -90px;
  background: transparent;
  border: 0px;
}

.wrapper{
  background: #000000;
  color: #000000;
  opacity: 0.3;
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  margin-left: 30%;
  margin-right: 30%;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid slategray;
  box-sizing: border-box;
}

.button-container{
  position: relative;
}
<body>
  <div class="image">
    <img src="landingpage.jpg">
    <div class="wrapper">
      <div class="button-container">
        <form>
          <input class="Button" type="button" value="Enter" onclick="window.location.href='about.html'" />
        </form>
      </div>
    </div>
  </div>
</body>

Upvotes: 0

user1178830
user1178830

Reputation: 446

Your border at the top is the same size as the height of your button, so the text basically gets pushed off of it. Try setting a border-top of 50px and you'll see it reappear.

You can play around with it here: http://www.cssdesk.com/zPURs

Upvotes: 1

Related Questions