使用CSS创建带有边框的按钮
[英]Creating a button with borders with CSS
问题描述
So I am working on a project for my own personal use (Its a way of learning for me) 
所以我正在为自己的个人目的而设计一个项目（这是我的一种学习方式）
And Im trying to add a button to my website which is going to be transparent with white borders, I was browsing stackoverflow and I stumbled on to this. 我试图在我的网站上添加一个带有白色边框的透明按钮，我正在浏览stackoverflow，但我偶然发现了这一点。 JsFiddle JsFiddle
I tried adding it to my CSS but it didnt go to well, its not showing up on the webpage. 我尝试将其添加到我的CSS中，但是效果不佳，未在网页上显示。
I took a break from this project for about a month so there might be something that I forgot to do but I dont know what. 我从这个项目中休假了大约一个月，所以可能有些事情我忘了做，但是我不知道该做什么。
(The button is at the bottom of the CSS) （该按钮位于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 的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 JS
$(document).ready(function() {
$('#sidebar-btn').click(function() {
$('#sidebar').toggleClass('visible');
});
});
2 个解决方案
解决方案1
0 2016-04-13 03:44:14
The answer was really simple. 答案很简单。 I had to add the HTML code to connect the CSS part so the missing code was 我必须添加HTML代码来连接CSS部分，因此缺少的代码是
<div style="background-color: red; text-align: center; padding: 10px"><button>button</button></div>
Which I added to the HTML section in my code 我在代码中添加到HTML部分的
解决方案2
0 2016-04-13 03:45:53
I hope this would help, though a little bit. 我希望这会有所帮助，尽管有一点点。 I've created a simple example regarding transparent button. 我创建了一个有关透明按钮的简单示例。 I've put the button inside the div element which has a background image. 我已将按钮放在具有背景图像的div元素内。
HTML 的HTML
<div>
<button>Transparent Button</button>
</div>
CSS 的CSS
body {margin: 0;}
div {
width: 100vw;
height: 100vh;
background-image: url(path/to/image/imagefile.jpg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
button {
background: rgba(0,0,0,0.3);
padding: 10px 20px;
border: 2px solid white;
font: 16px Arial;
line-height: 2;
color: white;
cursor: pointer;
}
button:hover {
background: rgba(0,0,0,0.5);
}
You can change the background-image of the button to transparent to be totally transparent, but I chose to use rgba to have some little color. 您可以更改按钮的背景图像transparent是完全透明的，但我选择使用rgba有一些小的颜色。 The fourth parameter in the rgba is the opacity of the background of the button. rgba的第四个参数是按钮背景的不透明度。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.