HTML/CSS 有没有办法复制这个按钮答案

【问题标题】：HTML/CSS Is there a way to duplicate this buttonHTML/CSS 有没有办法复制这个按钮
【发布时间】：2019-10-15 01:48:40
【问题描述】：

我在 html/css 中制作了一个按钮，但我似乎无法找到复制按钮并赋予它不同位置的方法。例如，假设我希望复制的按钮位于原始按钮右侧 50 像素但高度相同。

如果我复制 html 代码，这 2 个按钮会相互重叠，我不确定我必须更改哪个 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;
}

<body>
        <a href="#">
            <svg>
            <rect></rect>
            </svg>
            Button 1
        </a>      
</body>

【问题讨论】：

标签： html css duplicates positioning

【解决方案1】：

在您使用绝对定位的当前设置下，最快的方法是选择不同的按钮并使用它们上的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>

在下面的 sn-p 中，我更改了一些位置属性，您不必使用绝对定位。可以使用边距和填充来定位按钮。

body {
    background-color: #262626;
    padding: 50px;
    box-sizing: border-box;
}
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-right: 50px;
    padding: 20px;
    position: relative;                                   
    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>
    <a href="#">
        <svg>
        <rect></rect>
        </svg>
        Button 1
    </a>   
    <a href="#">
        <svg>
        <rect></rect>
        </svg>
        Button 2
    </a> 
</body>

【讨论】：

我不知道哪个是最好的解决方案。但我正在考虑将它们放在一个位置容器中并为其添加一个填充，这样它们就可以在右侧与相同的填充对齐。所以我不需要为每个按钮输入单独的位置值，但我还没有找到方法。
检查我编辑的答案，在第二个版本中我对其进行了调整，因此不需要绝对定位。希望对您有所帮助！
我检查了这是我正在寻找的只有 svg 的笔触效果停止工作，这是拥有这个效果按钮的全部想法。
@AdamYanis 在彼得的例子中，中风效果对我有用。