how to position svg using div - html

Question

Trying to position svg element by surrounding it by div and adding style to div like float right or padding. After adding div It was all fine but it disappears once i add style to div.
.background {
background: red;
}
.button-text {
text-align: center;
}
.button{
float: right;
padding: 40px;
}
<div class="background">
<div type="button" class="button" >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 39" fill="none">
<path
d="M3.94006 1.22995V18.11H1.02002C0.46002 18.11 0 18.5699 0 19.1299C0 19.6899 0.46002 20.15 1.02002 20.15H3.94006V37.03C3.94006 37.59 4.40008 38.05 4.96008 38.05C5.52008 38.05 5.9801 37.59 5.9801 37.03V1.22995C5.9801 0.66995 5.52008 0.209961 4.96008 0.209961C4.40008 0.209961 3.94006 0.66995 3.94006 1.22995Z"
fill="#FFEC83"
/>
<path
d="M13.3999 0.5H245.96C247.574 0.5 248.88 1.80616 248.88 3.42001V34.84C248.88 36.4539 247.574 37.76 245.96 37.76H13.3999C11.7861 37.76 10.48 36.4539 10.48 34.84V26.93H15.72C16.5561 26.93 17.24 26.2461 17.24 25.41C17.24 24.5738 16.5561 23.89 15.72 23.89H10.48V14.46H15.72C16.5561 14.46 17.24 13.7761 17.24 12.94C17.24 12.1038 16.5561 11.42 15.72 11.42H10.48V3.42001C10.48 1.80614 11.7861 0.5 13.3999 0.5Z"
stroke="#FFEC83"
/>
<path
d="M255.42 1.22995V18.11H258.34C258.9 18.11 259.36 18.57 259.36 19.13C259.36 19.69 258.9 20.15 258.34 20.15H255.42V37.03C255.42 37.59 254.96 38.05 254.4 38.05C253.84 38.05 253.38 37.59 253.38 37.03V1.22995C253.38 0.66995 253.84 0.209961 254.4 0.209961C254.96 0.209961 255.42 0.66995 255.42 1.22995Z"
fill="#FFEC83"
/>
<foreignobject width="260" height="39">
<p class="button-text">SEE ALL NEWS</p>
</foreignobject>
</svg>
</div>
</div>

Answer 1

.background {
background-color: red;
width: 100%;
height: 200px;
}
.button-text {
text-align: center;
}
.button {
float: right;
padding: 40px;
z-index: 100;
width: 260px;
height: 39px;
}
<div class="background">
<div type="button" class="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 39" fill="none" w>
<path d="M3.94006 1.22995V18.11H1.02002C0.46002 18.11 0 18.5699 0 19.1299C0 19.6899 0.46002 20.15 1.02002 20.15H3.94006V37.03C3.94006 37.59 4.40008 38.05 4.96008 38.05C5.52008 38.05 5.9801 37.59 5.9801 37.03V1.22995C5.9801 0.66995 5.52008 0.209961 4.96008 0.209961C4.40008 0.209961 3.94006 0.66995 3.94006 1.22995Z" fill="#FFEC83" />
<path d="M13.3999 0.5H245.96C247.574 0.5 248.88 1.80616 248.88 3.42001V34.84C248.88 36.4539 247.574 37.76 245.96 37.76H13.3999C11.7861 37.76 10.48 36.4539 10.48 34.84V26.93H15.72C16.5561 26.93 17.24 26.2461 17.24 25.41C17.24 24.5738 16.5561 23.89 15.72 23.89H10.48V14.46H15.72C16.5561 14.46 17.24 13.7761 17.24 12.94C17.24 12.1038 16.5561 11.42 15.72 11.42H10.48V3.42001C10.48 1.80614 11.7861 0.5 13.3999 0.5Z" stroke="#FFEC83" />
<path d="M255.42 1.22995V18.11H258.34C258.9 18.11 259.36 18.57 259.36 19.13C259.36 19.69 258.9 20.15 258.34 20.15H255.42V37.03C255.42 37.59 254.96 38.05 254.4 38.05C253.84 38.05 253.38 37.59 253.38 37.03V1.22995C253.38 0.66995 253.84 0.209961 254.4 0.209961C254.96 0.209961 255.42 0.66995 255.42 1.22995Z" fill="#FFEC83" />
<foreignobject width="260" height="39">
<p class="button-text">SEE ALL NEWS</p>
</foreignobject>
</svg>
</div>
</div>