HTML / CSS Есть ли способ дублировать эту кнопку - PullRequest
Новая
       9

HTML / CSS Есть ли способ дублировать эту кнопку

0 голосов
/ 12 октября 2019

Я сделал кнопку в 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>

1 Ответ

1 голос
/ 12 октября 2019

При текущих настройках, когда вы использовали абсолютное позиционирование, самый быстрый способ - выбрать различные кнопки и использовать для них свойство 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>

В приведенном ниже фрагменте я изменил некоторые атрибуты позиции, и вам не нужно использовать абсолютное позиционирование. Кнопки могут быть расположены с помощью полей и отступов. 

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>
...