I need help creating a Sign In button similar to the one on YouTube, with an image on the left and text on the right.
After attempting the code below, I realized that the image does not display as intended when executed.
How can I successfully position the image to the left of the text?
document.getElementById('profileItem').style.width='150px';
document.getElementById('profileItem').style.borderRadius='10px';
document.getElementById('profileItem').style.background='none';
// document.getElementById('profileItem').style.background='url(images/SignUpBackground.png)';
// document.getElementById('profileItem').style.backgroundSize='cover';
// document.getElementById('profileItem').style.backgroundRepeat='no-repeat';
document.getElementById('profileItem').style.border='1px solid #787CF5';
// document.getElementById('profileItem').innerHTML="Sign In";
document.getElementById('profileItem').style.color="#787CF5";
document.getElementById('profileItem').style.fontSize="20px";
var btn = document.getElementById("profileItem");
btn.setAttribute("src","images/defaultProfImg.png")
var title = document.createElement("h4");
title.innerHTML = "Sign In";
btn.appendChild(title);.profileItem {
height: 66px;
width: 66px;
background-image: url("../images/defaultProfImg.png");
/* background-color: blue; */
background-repeat: no-repeat;
background-size:cover;
border: 1px solid #383838;
right: 10px;
position: fixed;
border-radius: 40px;
margin-top: 7px;
cursor: pointer;
}
.profileItem h4 {
margin: auto;
text-align: center;
vertical-align: middle;
}<div class="myAccountAndUploadDiv" id="myAccountAndUploadDiv">
<button class="profileItem" id="profileItem"></button>
</div>