CODEWITHSUNDEEP
htmlcssduplicatespositioning
Adam Yanis
Adam Yanis

Reputation: 11

HTML/CSS Is there a way to duplicate this button

I made a button in html/css but I can't seem to find a way to duplicate the button and give it a different position. For example lets say I want the duplicated button to be 50 pixels to the right of the original button but on the same height.

If I copy the html code the 2 buttons would overlap eachother, I'm not sure which css positioning code I have to alter for it to show next to eachother.

Could someone help me I'm just a rookie it would save me a lot of time.

I tried to do some research and change some settings but it didn't work

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>

Upvotes: 0

Views: 1037

Answers (1)

Peter K.
Peter K.

Reputation: 36

With your current setup as you used absolute positioning, the quickest way is to select the different buttons and use the top and left property on them for positioning.

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>

In the below snippet I changed some position attributes and you don't have to use absolute positioning. The buttons can be positioned using margins and paddings.

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>

Upvotes: 1

Related Questions