Question

这些是我在项目中使用的两种类型的按钮，我想将相同的CSS应用于它们，但我没有这样做，我不知道为什么首先是：

<a href="#" class="btn btn-primary">Add</a>

第二种是：

 <input class="btn btn-primary" type="submit" value="Add" name="add1" onclick='if (confirm(&quot;Check all the entry ?&quot;))
            { document.post_57a43df006372873848099.submit(); }
            event.returnValue = false; return false;' >

以下是我的代码的css：

.btn {
  position: relative;
  font-size: 16px;
  color: black;
  text-decoration: none;
  display: inline-block;
  border: 3px solid #333333;
  border-radius: 5px;
  padding: 10px;
  margin-top: 25px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  font-weight: 300;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
.btn span {
  position: relative;
  z-index: 1;
}

.btn:before {
  display: block;
  position: absolute;

  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
  content: '';
  border-color: #97455f;
  border-style: solid;
  border-width: 1px;
  border-radius: 100px;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
  box-sizing: border-box;
}

.btn:hover {
  color:white ;
}


.btn:hover:before {
  border-width: 100px;
}

所以我在两者上都使用了类btn，但是css只适用于而且我不知道为什么。任何帮助，将不胜感激！代码在这里： https://jsfiddle.net/jy4gth0x/

如何将相同的CSS代码应用于两个按钮（输入[type = submit]和.btn类

0 个答案: