我在html / css中创建了一个按钮，但是我似乎找不到找到一种方法来复制该按钮并为其提供不同的位置。例如，假设我希望重复的按钮在原始按钮的右边50像素，但高度相同。
如果我复制html代码，则这两个按钮会彼此重叠，我不确定我必须更改哪个css定位代码以使其在彼此旁边显示。
有人可以帮我，我只是个菜鸟，它将为我节省很多时间。
我尝试进行一些研究并更改了一些设置，但是没有用
HTML代码<<<<
<body>
<a href="#">
<svg>
<rect></rect>
</svg>
Button 1
</a>
</body>
CSS代码<<<<
a svg,
a svg rect
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
fill: transparent;
}
a svg rect
{
stroke: #fff;
stroke-width: 4;
transition: 0.5s;
stroke-dasharray: 500,500;
stroke-dashoffset: 0;
}
a:hover svg rect
{
stroke: #1545;
stroke-dasharray: 100,400;
stroke-dashoffset: 220;
}
a {
margin-left: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 180px;
height: 60px;
text-align: center;
line-height: 60px;
font-family: sans-serif;
text-transform: uppercase;
font-size: 24px;
letter-spacing: 2px;
color: #fff;
text-decoration: none;
}
body
{
margin: 0;
padding: 0;
background: #262626;
}
在使用绝对定位的当前设置中，最快的方法是选择不同的按钮，并使用它们上的top和left属性进行定位。
body {
background-color: #262626;
}
a svg,
a svg rect
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
fill: transparent;
}
a svg rect
{
stroke: #fff;
stroke-width: 4;
transition: 0.5s;
stroke-dasharray: 500,500;
stroke-dashoffset: 0;
}
a:hover svg rect
{
stroke: #1545;
stroke-dasharray: 100,400;
stroke-dashoffset: 220;
}
a {
margin-left: 60px;
position: absolute;
top: 50px;
transform: translate(-50%,-50%);
width: 180px;
height: 60px;
text-align: center;
line-height: 60px;
font-family: sans-serif;
text-transform: uppercase;
font-size: 24px;
letter-spacing: 2px;
color: #fff;
text-decoration: none;
}
a:nth-of-type(1) {
left: 50px;
}
a:nth-of-type(2) {
left: 250px;
}<body>
<a href="#">
<svg>
<rect></rect>
</svg>
Button 1
</a>
<a href="#">
<svg>
<rect></rect>
</svg>
Button 2
</a>
</body>