CSS & HTML Button

Question

So I am trying to add a list of buttons to a website I am creating. But when I put them one above another it disables the ability to click the one on top. Can someone help me understand how I can better code this or what I am missing?

My CSS is mostly just formatting stuff but I did want to keep going but for some reason I cannot figure out how to get these two buttons to work right. I just want to layer them on the right side one after the other. I got them in a nice spot but then it just does not let me click on them.

My CSS file includes formatting for the right of the button, for two of the headers, and adds an animated gradient font.

body {
  width: 100wh;
  height: 90vh;
  color: #fff;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@-moz-keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes Gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

h1 {
  font-family: "Merienda";
  font-size: 40px;
  font-weight: 400;
  text-align: center;
  position: absolute;
  top: 40%;
  right: 0;
  left: 0;
}

h2 {
  font-family: "Merienda";
  font-weight: 300;
  text-align: center;
  position: absolute;
  top: 55%;
  right: 0;
  left: 0;
}

p {
  font-family: "Merienda";
  font-weight: 300;
  text-align: center;
  position: absolute;
  top: 63%;
  right: 0;
  left: 0;
}

a.button {
  -webkit-apperance: button;
  -moz-apperance: button;
  apperance: button;

  font-family: "Merienda";
  background-color: none;
  text-decoration: none;
  color: white;
  font-size: 24px;
  padding-top: 10px;
  padding-right: 28px;
  padding-left: 28px;
  padding-bottom: 10px;
  border-radius: 10px;
  line-height: 10;
}

.right {
  position: absolute;
  right: 0px;
  width: 200px;
}

   

     <!DOCTYPE html>
    <html lang="en" >
    
    <head>
      <meta charset="UTF-8">
      <title>Kevin's Website</title>
      
      
      
          <link rel="stylesheet" href="homestyle.css">
    
      
    </head>
    
    <body>
    
    <!DOCTYPE html>
    <html>
    
    <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merienda" type="text/css" />
    
      <title>Kevin's Website</title>
      </head>
    <body>
    
    <h1>Kevin</h1>
      
      <h2> An Ambitious Student </h2>
      <p> Info </p>
      <p style="line-height: 5">Yeah me </p>
    
      <div class="right";>  
        <a href="skills.html" class=button>Skills</a> 
      </div>
    
      <div style="line-height: 25"; class="right";>  
        <a href="aboutme.html" class=button>About Me</a> 
      </div>
      
      
    </body>
    </html>

i see evereything position:absolute which a bad way to create layout .. so i advise you to consider a better way than this instead of fixing this — Temani Afif
– Temani Afif, Commented Mar 30, 2018 at 13:55

Cat · Accepted Answer · 2018-03-30 16:10:34Z

I found a couple small issues that resulted in the behavior you're getting.

First in the HTML:

<div class="right";>  
  <a href="skills.html" class=button>Skills</a> 
</div>

<div style="line-height: 25"; class="right";>  
  <a href="aboutme.html" class=button>About Me</a> 
</div>

Changed To:

<div class="right";>  
  <a href="skills.html" class=button>Skills</a> 
  <a href="aboutme.html" class=button>About Me</a> 
</div>

Second in the CSS:

a.button {
  -webkit-apperance: button;
  -moz-apperance: button;
  apperance: button;

  font-family: "Merienda";
  background-color: none;
  text-decoration: none;
  color: white;
  font-size: 24px;
  padding-top: 10px;
  padding-right: 28px;
  padding-left: 28px;
  padding-bottom: 10px;
  border-radius: 10px;
  line-height: 10;
}

Changed To:

a.button {
  -webkit-apperance: button;
  -moz-apperance: button;
  apperance: button;
  font-family: "Merienda";

  background-color: none;
  text-decoration: none;
  color: white;
  font-size: 24px;
  padding: 10px 28px;
  border-radius: 10px;
  display: block;
}

The actual issue is that "line-height" was making the area of your a buttons so big that they overlapped each other, so each button would cover up the one above it (making it not-clickable).

Basically, if you remove the line height, it should fix your problem. If you're wanting to put space around them, I would adjust the padding of the '"a.button"'s.

Here's a DEMO

JackHacks · Accepted Answer · 2018-03-30 14:06:05Z

1

I see a problem in your HTML. You open an extra html and body tag without closing them.

Not sure if that will have an impact on the buttons, but it's a good idea to fix.

Also, you should probably remove the semicolons from your div tags. That might do the trick.

I think it should look more like this:

 <!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Kevin's Website</title>

   <link rel="stylesheet" href="homestyle.css">    
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merienda" type="text/css" />


</head>

<body>

<h1>Kevin</h1>

  <h2> An Ambitious Student </h2>
  <p> Info </p>
  <p style="line-height: 5">Yeah me </p>

  <div class="right">  
    <a href="skills.html" class=button>Skills</a> 
  </div>

  <div style="line-height: 25" class="right">  
    <a href="aboutme.html" class=button>About Me</a> 
  </div>


</body>
</html>

edited Mar 30, 2018 at 14:06

answered Mar 30, 2018 at 13:59

JackHacks

2731 silver badge12 bronze badges

3 Comments

aturc Over a year ago

Typically you also can’t forget to add in “px” when specifying any height, for example style=“line-height:5px”

Cody Over a year ago

So if I add in px for line height it doesn't actually use the lineheight. But if I don't add it in then it works.

JackHacks Over a year ago

Why are you using line-height? If you want to add space around the paragraph/div I would probably use padding instead. I think line-height is more for adjusting space between lines in the same paragraph. w3schools.com/cssref/tryit.asp?filename=trycss_line-height

Collectives™ on Stack Overflow

CSS & HTML Button

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related