Question

我想知道如何创建一个CSS的按钮，每侧都有'括号'。澄清一下，不只是通过键入它们得到的括号，而是更大的括号，如下所示：

Answer 1

您可以将before和after伪选择器与content属性一起使用：

＆＃13;

button {
  font-size: 15px;
  font-weight: bold;
  background: none;
  border: none;
  white-space: nowrap;
}
button::before {
  content: "[ ";
  font-size: 1.5em;
    
}
button::after {
  content: " ]";
  font-size: 1.5em;
}

button.bigtext {
  font-size: 80px;
}

＆＃13;

<button>Some Text</button>
<br />
<button class="bigtext">Some Text</button>

＆＃13;

Answer 2

这是一种可以编辑包含阴影

的括号的大小和长度的方法

＆＃13;

.brackets {
  width: 200px;
  height: 50px;
  box-shadow: inset 0px 0px 0px 5px black;
  background: white;
  position: relative;
  }
.button {
  height: 50px;
  width: 80%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  background: white;
  font-size: 1.6em;
  font-weight: bold;
  }

＆＃13;

<div class="brackets">
  <button class="button">
    Button
  </button>
</div>

＆＃13;

Answer 3

您可以采取一些措施来实现这一目标。

第一个也是最简单的：在Photoshop或其他任何地方创建一个按钮背景，并将其用作按钮背景。

第二步：键入所需的括号和按钮文本，然后设置单独的样式。

HTML：

<div class="button">
    <p><span class="large">[</span>Button<span class="large">]</span></p>
</div>

CSS：

p {
    font-size: 20px;
}
.large {
    font-size: 40px;
}

这些是我能想到的直接方式，非常简单快捷。

Answer 4

不确定我是否遵循了这个问题。只需在它周围放一个支架。示例如下。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><title>Title Here </title>
</head>
<body>
<br>
<center>Your Title</center>
<br>
Some Text Data Here 
<style type="text/css">
#modernbricksmenu { padding: 0; width: 100%; background: transparent; voice-family: ''}''; voice-family: inherit; } 
#modernbricksmenu ul { font: bold 11px Arial; margin:0; margin-left: 40px; /*margin between first menu item and left browser edge*/ padding: 0; list-style: none; } 
#modernbricksmenu li {   display: inline; margin: 0 2px 0 0; padding: 0; text-transform:uppercase; }
#modernbricksmenu a { float: left; display: block; color: white; margin: 0 1px 0 0; /*Margin between each menu item*/ 
padding: 5px 10px; text-decoration: none; letter-spacing: 1px; background-color: black; /*Default menu color*/ border-bottom: 1px solid white; } 
#modernbricksmenu a:hover { background-color: gray; /*Menu hover bgcolor*/ } 
#modernbricksmenu #current a { /*currently selected tab*/ background-color: #D25A0B; /*Brown color theme*/  border-color: #D25A0B; /*Brown color theme*/  } 
#modernbricksmenuline { clear: both; padding: 0; width: 100%; height: 5px; line-height: 5px; background: #D25A0B; /*Brown color theme*/  } 
#myform { /*CSS for sample search box. Remove if desired */ float: right; margin: 0; padding: 0; } 
#myform .textinput { width: 190px; border: 1px solid gray; } 
#myform .submit { font: bold 11px Verdana; height: 22px; background-color: lightyellow; } </style> 
<div id="modernbricksmenu"> <ul> <li style="margin-left: 1px">
<a href="page.com" title="SomePage">   Home</a></li> <li>                         
<a href="page.com" title="SomeOther">  New</a></li> <li id="current">            
<a href="page.com" title="AnotherOne"> Revised</a></li> <li>                         
<a href="page.com" title="StilMore">   [Tools]</a></li> <li>                         
<a href="page.com" title="GoAway">     Forums</a></li> </ul>
</div>
<div id="modernbricksmenuline">&nbsp;</div> 
</body>
</html>

Answer 5

我不想更改模板，所以我想出了一个纯CSS解决方案。它还适用于所有背景。

.btn {
  position: relative;
  border: none;
  background: none;
  padding: 8px 24px; 
}

.btn::before,
.btn::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  border: 2px solid #000;
  content: "";
}

.btn::before {
  left: 0;
  border-right-width: 0;
}

.btn::after {
  right: 0;
  border-left-width: 0;
}

<a class="btn btn-primary">Buttton</a>

使用CSS在每一侧创建一个带括号的按钮

5 个答案: