button height in percent makes it flat

Asked Jun 27 '18 at 14:36

Active Jun 27 '18 at 16:11

Viewed 24 times

I've been trying to create a button that resizes with screen resolution but it's giving me trouble. For some reason the width is fine - but with all the same code the height won't go above about 5 pixels. This is what I'm doing:

.links a {
  text-decoration: none;
  border: red 2px solid;
  border-radius: 100%;
  display: inline-block;
  height: 12%;
  width: 12%;
  overflow: hidden;
}

button.links {
  background:#003678;
  border: none;
  height: 60%;
  width: 60%;
}

<button class="links">
  <a href="Ap.html" id="Ap"></a>
</button>

button.links is the parent in this case. I've tried targeting the body element and adding another element to target for size. What's going wrong?

edited Jun 27 '18 at 16:11

Gabor

asked Jun 27 '18 at 14:36

user9967809

If the body doesn't have a height this will not work. Also `button` elements should not contain links. They perform two different fuctions. – Paulie_D Jun 27 '18 at 14:39
https://codepen.io/Paulie-D/pen/BVqVQb – Paulie_D Jun 27 '18 at 14:45
That fixed it! I didn't realize I had to define the size of every element in the chain. Thank you! – user9967809 Jun 27 '18 at 14:50

button height in percent makes it flat

0 Answers0