IIs there a way to link the button to a link and center it's text?

Question

Is there a way of linking the button to another website ? (for example youtube) because it doesn't work with href="{link}"

<button href="www.youtube.com">GoTo Lessons</button>
<style>
a {
  border: 2px solid;
  color: black;
  border-radius: 15px;
}
</style>

<div class="code-area">
  <textarea id="htmlCode" class="1111" placeholder="HTML" 
            oninput="showPreview()"></textarea>
  <textarea id="cssCode" class="2222" placeholder="CSS" 
            oninput="showPreview()"></textarea>
  <textarea id="jsCode" class="333" placeholder="JavaScript" 
            oninput="showPreview()"></textarea>             
</div>
<div class="preview-area">
  <iframe id="preview-window"></iframe>
</div>

<style>
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
}
.code-area {
  display: flex;
  flex-direction:column;
  width: 50%;
  border-right:1px solid #555;
}
.code-area textarea {
  border: 2px solid;
  border-radius: 15px;
  resize: none;
  outline: none;
  width: 100%;
  height: 33.33%;
  font-size: 18px;
  padding: 10px;
}
.preview-area {
  border: 2px solid;
  border-radius: 15px;
  width: 50%;
}
.preview-area iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

<script>
function showPreview(){
  var htmlCode = document.getElementById("htmlCode").value;
  var cssCode = "<style>"+document.getElementById("cssCode").value+"</style>";
  var jsCode = "<scri"+"pt>"+document.getElementById("jsCode").value+"</scri"+"pt>";
  var frame = document.getElementById("preview-window").contentWindow.document;
  frame.open();
  frame.write(htmlCode+cssCode+jsCode);
  frame.close();
}
</script>

don't pay attention to this random text, i just entered it orelse it wouldn't let me ost cause i have too many code and not enough text so if this is boring your'e not forced to read this i think so yeah so if you want is you can go so dont read this so yeah so bye

Try running the code, it gives you a giant button box for the "GoTo Lessons" text — The spAce Company, May 17 '21 at 08:24
@ChrisG It's not proper at all. Link is clickable, but box should be. — ulou, May 17 '21 at 08:34
Here's one valid solution: https://jsfiddle.net/khrismuc/x4bj1htm/ — , May 17 '21 at 09:39

ulou · Answer 1 · 2021-05-17T08:43:08.247

You can use CSS flexbox:

  display: flex;
  justify-content: center; /* for text "text-align: center;" will work too */
  align-items: center;

function showPreview(){
  var htmlCode = document.getElementById("htmlCode").value;
  var cssCode = "<style>"+document.getElementById("cssCode").value+"</style>";
  var jsCode = "<scri"+"pt>"+document.getElementById("jsCode").value+"</scri"+"pt>";
  var frame = document.getElementById("preview-window").contentWindow.document;
  frame.open();
  frame.write(htmlCode+cssCode+jsCode);
  frame.close();
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
}
.code-area {
  display: flex;
  flex-direction:column;
  width: 50%;
  border-right:1px solid #555;
}
.code-area textarea {
  border: 2px solid;
  border-radius: 15px;
  resize: none;
  outline: none;
  width: 100%;
  height: 33.33%;
  font-size: 18px;
  padding: 10px;
}
.preview-area {
  border: 2px solid;
  border-radius: 15px;
  width: 50%;
}
.preview-area iframe {
  width: 100%;
  height: 100%;
  border: none;
}

a {
  border: 2px solid;
  color: black;
  border-radius: 15px;
  
  /* Added */
  display: flex;
  text-align: center;
  align-items: center;
}
div {
  text-align: center;
  vertical-align: middle;
}

<a href="www.youtube.com">GoTo Lessons</a>

<div class="code-area">
  <textarea id="htmlCode" class="1111" placeholder="HTML" 
            oninput="showPreview()"></textarea>
  <textarea id="cssCode" class="2222" placeholder="CSS" 
            oninput="showPreview()"></textarea>
  <textarea id="jsCode" class="333" placeholder="JavaScript" 
            oninput="showPreview()"></textarea>             
</div>
<div class="preview-area">
  <iframe id="preview-window"></iframe>
</div>

You have OP's bad HTML (
inside ); a proper answer shouldn't contain invalid code. This is also a duplicate and doesn't need to be answered here. — , May 17 '21 at 08:29
Original question was how to center `box` inside `box` + makes entire box clickable. I provided solution that match requirements. Orginal code is OPs code and it's provided as just an example, it's not Code Review exchange. Your solution from comment doesn't even meet requirements, so I don't understand why did you voted it down. — ulou, May 17 '21 at 08:38
You're writing an answer not just for OP but for future users. Copy-pasting bad code is a massive problem, and by putting invalid HTML in an answer, you're contributing to that. The requirement (which is not stated in the question but a comment) can be solved differently, with valid HTML. — , May 17 '21 at 09:30
Is my code invalid? Did you checked it again couple mins after writing your comment? Is your solution valid and met requirements then? — ulou, May 17 '21 at 09:39

IIs there a way to link the button to a link and center it's text?

1 Answers1