CODEWITHSUNDEEP
htmlcssbuttonformat
Cody
Cody

Reputation: 63

CSS & HTML Button

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>

Upvotes: 1

Views: 103

Answers (2)

Cat
Cat

Reputation: 177

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

Upvotes: 2

JackHacks
JackHacks

Reputation: 273

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>

Upvotes: 1

Related Questions