CODEWITHSUNDEEP
htmlcssbuttoncanvas
The Good Guy
The Good Guy

Reputation: 31

Put button inside canvas

I created a button in html and gave it a style in CSS, i want to put that button onto my canvas.

Here is my Code

<!DOCTYPE html>

<html>
<head>
    <title>Start Game</title>
</head>

<body>
    <center>
      <canvas id="canvas" width="1000" height="800" style="border:5px solid black"></canvas>
      <a href="Game/index.html" class="myButton">START GAME</a>
      <style>

          .myButton {
              -moz-box-shadow: 0px 10px 14px -7px #276873;
              -webkit-box-shadow: 0px 10px 14px -7px #276873;
              box-shadow: 0px 10px 14px -7px #276873;
              background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
              background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
              background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
              background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
              background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
              background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
              filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
              background-color:#599bb3;
              -moz-border-radius:8px;
              -webkit-border-radius:8px;
              border-radius:8px;
              display:inline-block;
              cursor:pointer;
              color:#ffffff;
              font-family:arial;
              font-size:20px;
              font-weight:bold;
              padding:13px 32px;
              text-decoration:none;
              text-shadow:0px 1px 0px #3d768a;
          }
          .myButton:hover {
              background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
              background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
              background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
              background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
              background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
              background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
              filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
              background-color:#408c99;
          }
          .myButton:active {
              position:relative;
              top:1px;
          }

      </style>
    </center>

</body>
</html>

Thanks in advance!

Upvotes: 1

Views: 3271

Answers (3)

Eese
Eese

Reputation: 1

I did a library that lets put buttons inside the Canvas and more things. Please check-it out: http://www.sakuracode.com/canvate Here you a are a simple drag button that changes the color and text of the button inside the canvas. You can add style to the text too.

        container.startDrag();
        container.setPivot(0.5, 0.5);
        container.addEventListener("drag", onDrag);
        container.addEventListener("drop", onDrop);

Codepen

If you have any question, please let me know!

Upvotes: 0

Jordan Davis
Jordan Davis

Reputation: 1520

You can't nest elements in canvas you can only draw the button with CSS...

//SIMPLE WAY OF ALSO DOING THIS IS ADDING THESE PROPERTIES TO [.myButton]-class

position: absolute;
top: 45%;
left: calc(47%);

I also might add that if your using HTML5 and declaring !DOCTYPE you shouldn't use the <center> tag as it was deprecated.

Upvotes: 1

abdulmanan ahmed
abdulmanan ahmed

Reputation: 1

<canvas style="z-index:1" id="canvas" width="1000" height="800" style="border:5px solid black"></canvas> <button class="myButton" style="z-index:2"> <a href="Game/index.html" class="myButton">START GAME</a></button> START GAME

put the button under the canvas and give each a z-index.(canvas should have lower z-index than button)

Upvotes: 0

Related Questions