如何在我的网页中添加两个按钮

我的网站上有这个按钮，它真的很酷，但是，我无法创建多个按钮。我试图找出原因，但我找不到问题所在。有人知道出了什么问题吗？我基本上只想在"主页"按钮的左侧放置另一个名为"联系人"的按钮。谢谢！

html, body {
    height: 100%;
}
body {
    background: linear-gradient(#000 0%, #121212 100%);
}
.center-wrap1 {
    position: absolute;
    top: calc(50% - 100px);
    left: calc(75% - 125px);
    width: 250px;
    height: 200px;
}
.center-wrap2 {
    position: absolute;
    top: calc(20% - 100px);
    left: calc(50% - 125px);
    width: 250px;
    height: 200px;
}
.button {
    position: relative;
    display: block;
    background: none center center no-repeat;
    background-size: cover;
    border: 2px solid #2e2e2e;
    text-transform: uppercase;
    letter-spacing: .3rem;
    padding: 20px 15px;
    text-align: center;
    max-width: 270px;
    min-width: 200px;
    cursor: pointer;
    overflow: hidden;
    -webkit-transition: border 1s cubic-bezier(0.19,1,.22,1),color .6s cubic-bezier(0.19,1,.22,1);
    transition: border 1s cubic-bezier(0.19,1,.22,1), color .6s cubic-bezier(0.19,1,.22,1), background 5s cubic-bezier(0.19,1,.22,1);
}
.button a {
    color: #969696;
    font-family: 'Varela Round';
    text-decoration: none;
}
.button .mask {
    background: #fff;
    background: rgba(255,255,255,0.5);
}
.button .mask {
    position: absolute;
    display: block;
    width: 200px;
    height: 100px;
    -webkit-transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
    transform: translate3d(-120%,-50px,0) rotate3d(0,0,1,45deg);
    -webkit-transition: all 1.1s cubic-bezier(0.19,1,.22,1);
    transition: all 1.1s cubic-bezier(0.19,1,.22,1);
}
.button .shift {
    -webkit-transition: all 1.1s cubic-bezier(0.19,1,.22,1);
    transition: all 1.1s cubic-bezier(0.19,1,.22,1);
}
.button:hover {
    border-color: #fff;
    /* box-shadow: 0 0 5px rgba(255,245,245,0.8); */
    /* background-image: url('http://cuinine.com/img/codepen/savvy.jpg'); */
}
.button:hover a {
    color: #fff;
}
.button:hover .mask {
    background: #fff;
    -webkit-transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
    transform: translate3d(120%,-100px,0) rotate3d(0,0,1,90deg);
}
.button:hover .shift {
    padding-left: 5px;
}

<!DOCTYPE html>
<html>
	<head>
				<link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
				<link rel = "stylesheet" href = "Style.css">
				<meta name = "viewport" content="width = device-width, initial-scale=1">
				<title> Website </title>
	</head>
	<header>
				<h1> Website </h1>
	</header>
<body>
        <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
        <div class="center-wrap1">
       	<div class="button">
        							<a href="#"> Home <span class="shift"></span></a>
        <div class="mask"></div>
        <div class="center-wrap2">
       	<div class="button">
        							<a href="#"> Contact <span class="shift"></span></a>
        <div class="mask"></div>
   	    </div>
		</div>
 		</div>
</body>
</html>

您没有关闭第一个按钮的<div>。

html,
body {
  height: 100%;
}
body {
  background: linear-gradient(#000 0%, #121212 100%);
}
.center-wrap1 {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(75% - 125px);
  width: 250px;
  height: 200px;
}
.center-wrap2 {
  position: absolute;
  top: calc(20% - 100px);
  left: calc(50% - 125px);
  width: 250px;
  height: 200px;
}
.button {
  position: relative;
  display: block;
  background: none center center no-repeat;
  background-size: cover;
  border: 2px solid #2e2e2e;
  text-transform: uppercase;
  letter-spacing: .3rem;
  padding: 20px 15px;
  text-align: center;
  max-width: 270px;
  min-width: 200px;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: border 1s cubic-bezier(0.19, 1, .22, 1), color .6s cubic-bezier(0.19, 1, .22, 1);
  transition: border 1s cubic-bezier(0.19, 1, .22, 1), color .6s cubic-bezier(0.19, 1, .22, 1), background 5s cubic-bezier(0.19, 1, .22, 1);
}
.button a {
  color: #969696;
  font-family: 'Varela Round';
  text-decoration: none;
}
.button .mask {
  background: #fff;
  background: rgba(255, 255, 255, 0.5);
}
.button .mask {
  position: absolute;
  display: block;
  width: 200px;
  height: 100px;
  -webkit-transform: translate3d(-120%, -50px, 0) rotate3d(0, 0, 1, 45deg);
  transform: translate3d(-120%, -50px, 0) rotate3d(0, 0, 1, 45deg);
  -webkit-transition: all 1.1s cubic-bezier(0.19, 1, .22, 1);
  transition: all 1.1s cubic-bezier(0.19, 1, .22, 1);
}
.button .shift {
  -webkit-transition: all 1.1s cubic-bezier(0.19, 1, .22, 1);
  transition: all 1.1s cubic-bezier(0.19, 1, .22, 1);
}
.button:hover {
  border-color: #fff;
  /* box-shadow: 0 0 5px rgba(255,245,245,0.8); */
  /* background-image: url('http://cuinine.com/img/codepen/savvy.jpg'); */
}
.button:hover a {
  color: #fff;
}
.button:hover .mask {
  background: #fff;
  -webkit-transform: translate3d(120%, -100px, 0) rotate3d(0, 0, 1, 90deg);
  transform: translate3d(120%, -100px, 0) rotate3d(0, 0, 1, 90deg);
}
.button:hover .shift {
  padding-left: 5px;
}

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
  <link rel="stylesheet" href="Style.css">
  <meta name="viewport" content="width = device-width, initial-scale=1">
  <title>Website</title>
</head>
<header>
  <h1> Website </h1>
</header>
<body>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <div class="center-wrap1">
    <div class="button">
      <a href="#"> Home <span class="shift"></span></a>
      <div class="mask"></div>
    </div>
  </div>
  <div class="center-wrap2">
    <div class="button">
      <a href="#"> Contact <span class="shift"></span></a>
      <div class="mask"></div>
    </div>
  </div>
</body>
</html>

看起来您在<div class="mask"></div>后缺少两个标签

将按钮 HTML 从 HOME 复制粘贴到它下面而不是它里面。

<div class="center-wrap1">
  <!-- Start of First Button -->
  <div class="button">
    <a href="#"> Home <span class="shift"></span></a>
    <div class="mask"></div>
  </div>
  <!-- Start of Second Button -->
  <div class="button">
    <a href="#"> Contact <span class="shift"></span></a>
    <div class="mask"></div>
  </div>
</div>

html,
body {
  height: 100%;
}
body {
  background: linear-gradient(#000 0%, #121212 100%);
}
.center-wrap1 {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(75% - 125px);
  width: 250px;
  height: 200px;
}
.center-wrap2 {
  position: absolute;
  top: calc(20% - 100px);
  left: calc(50% - 125px);
  width: 250px;
  height: 200px;
}
.button {
  position: relative;
  display: block;
  background: none center center no-repeat;
  background-size: cover;
  border: 2px solid #2e2e2e;
  text-transform: uppercase;
  letter-spacing: .3rem;
  padding: 20px 15px;
  text-align: center;
  max-width: 270px;
  min-width: 200px;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: border 1s cubic-bezier(0.19, 1, .22, 1), color .6s cubic-bezier(0.19, 1, .22, 1);
  transition: border 1s cubic-bezier(0.19, 1, .22, 1), color .6s cubic-bezier(0.19, 1, .22, 1), background 5s cubic-bezier(0.19, 1, .22, 1);
}
.button a {
  color: #969696;
  font-family: 'Varela Round';
  text-decoration: none;
}
.button .mask {
  background: #fff;
  background: rgba(255, 255, 255, 0.5);
}
.button .mask {
  position: absolute;
  display: block;
  width: 200px;
  height: 100px;
  -webkit-transform: translate3d(-120%, -50px, 0) rotate3d(0, 0, 1, 45deg);
  transform: translate3d(-120%, -50px, 0) rotate3d(0, 0, 1, 45deg);
  -webkit-transition: all 1.1s cubic-bezier(0.19, 1, .22, 1);
  transition: all 1.1s cubic-bezier(0.19, 1, .22, 1);
}
.button .shift {
  -webkit-transition: all 1.1s cubic-bezier(0.19, 1, .22, 1);
  transition: all 1.1s cubic-bezier(0.19, 1, .22, 1);
}
.button:hover {
  border-color: #fff;
  /* box-shadow: 0 0 5px rgba(255,245,245,0.8); */
  /* background-image: url('http://cuinine.com/img/codepen/savvy.jpg'); */
}
.button:hover a {
  color: #fff;
}
.button:hover .mask {
  background: #fff;
  -webkit-transform: translate3d(120%, -100px, 0) rotate3d(0, 0, 1, 90deg);
  transform: translate3d(120%, -100px, 0) rotate3d(0, 0, 1, 90deg);
}
.button:hover .shift {
  padding-left: 5px;
}

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
  <link rel="stylesheet" href="Style.css">
  <meta name="viewport" content="width = device-width, initial-scale=1">
  <title>Website</title>
</head>
<header>
  <h1> Website </h1>
</header>
<body>
  <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <div class="center-wrap1">
    <div class="button">
      <a href="#"> Home <span class="shift"></span></a>
      <div class="mask"></div>
    </div>
    <div class="button">
      <a href="#"> Contact <span class="shift"></span></a>
      <div class="mask"></div>
    </div>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：