所以我正在做一个供我个人使用的元素(这对我来说是一种学习方式)
我正在尝试向我的网站添加一个按钮，该按钮将透明并带有白色边框，我在浏览 stackoverflow 时偶然发现了这个。 JsFiddle
我尝试将它添加到我的 CSS，但效果不佳，它没有显示在网页上。
我从这个元素中休息了大约一个月，所以可能有些事情我忘了做，但我不知道是什么。
(按钮位于 CSS 的底部)
CSS
html,
body,
img {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background: url(.container);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial;
}
.container {
height: 100%;
width: 100%;
overflow: hidden;
z-index: 900;
}
.cycle-slideshow {
height: 100%;
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev,
.cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {
background: #FFF;
}
/*Menu CSS*/
#sidebar {
background: #151718;
width: 200px;
height: 17%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
z-index: 1000;
}
#sidebar.visible {
left: 0px;
transition: left 0.3s linear;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
ul li a {
background: #1C1E1F;
color: #ccc;
border-bottom: 1px solid #111;
display: block;
width: 180px;
padding: 10px;
text-decoration: none;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 150px;
cursor: pointer;
margin: 20px;
position: absolute;
top: 0px;
right: -60px;
}
#sidebar-btn span {
height: 1px;
background: #ffffff;
margin-bottom: 5px;
display: block;
}
#sidebar-btn span:nth-child(2) {
width: 75%;
}
#sidebar-btn span:nth-child(3) {
width: 50%;
}
button {
background-color: Transparent;
background-repeat: no-repeat;
cursor: pointer;
overflow: hidden;
outline: none;
height: 38px;
line-height: 40px;
border: 2px solid white;
display: inline-block;
float: none;
text-align: center;
width: 120px;
padding: 0px!important;
font-size: 14px;
color: #fff;
}
button:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
/*Menu CSS*/
HTML
<!DOCTYPE html>
<!-- Developer: Varga Developments -->
<!-- Project: Fully Responsive Website With A Background Image Slider. -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</head>
<body>
<div id="sidebar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="servicesPage.html">Services</a></li>
<li><a href="aboutPage.html">About</a></li>
<li><a href="aboutPage.html">Contact</a></li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Full Width Responsive Slider -->
<div class="container">
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/wp5.jpg">
<img src="images/wp6.jpg">
<img src="images/wp7.jpg">
</div>
<!-- Full Width Responsive Slider -->
</div>
</body>
</html>
JS
$(document).ready(function() {
$('#sidebar-btn').click(function() {
$('#sidebar').toggleClass('visible');
});
});
最佳答案
答案非常简单。 我必须添加 HTML 代码来连接 CSS 部分，所以缺少的代码是
<div style="background-color: red; text-align: center; padding: 10px"><button>button</button></div>
我在我的代码中添加到 HTML 部分
关于javascript - 使用 CSS 创建带边框的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36587888/