Я хотел бы выяснить, как создать кнопку с помощью CSS, у которой есть «скобки» с каждой стороны. Чтобы уточнить, не только скобки, которые вы получаете, вводя их, но и более крупные скобки, например:
5 ответов
Вот подход, при котором вы можете редактировать размер, толщину и длину скобок с использованием тени.
.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;
}<div class="brackets">
<button class="button">
Button
</button>
</div>Я не хотел менять свой шаблон, поэтому придумал решение на чистом 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>Для этого можно сделать несколько вещей.
Первый и самый простой: создайте фон для кнопки в 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;
}
Это простые и понятные способы, которые, на мой взгляд, действительно быстрые и легкие.
Не уверен, что понимаю вопрос. Просто установите вокруг него скобу. Пример ниже.
<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"> </div>
</body>
</html>
Вы можете использовать псевдоселекторы before и after с атрибутом content:
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;
}<button>Some Text</button>
<br />
<button class="bigtext">Some Text</button>