Custom button with bootstrap4

Question

I would like to build a button like this:

I am using bootstrap to create a button :<button type="button" class="btn btn-primary">Game</button>

Somebody can help me to make a 3d effect?

You could use `border-style: outset` for a similar effect, but it's not exactly the same effect as in your picture. — rid, Jun 06 '20 at 22:16
your question is too broad, you are asking for someone to do your work. Try to do it and add the code if you have problems. — Alex Angelico, Jun 07 '20 at 02:25

score 2 · Answer 1 · answered Jun 06 '20 at 23:50

I think this is the closest you can get using CSS. (Notice that the following script uses Bootstrap4)

<style type="text/css">
.my-style {
  border-radius: 8px;
  width: 120px;
  box-shadow: inset 0px 3px 1px 0px rgba(83,154,197,1),
              inset 3px 0px 1px 0px rgba(83,154,197,0.4),
              inset -0px -3px 1px 0px rgba(0,73,140,0.8),
              inset -3px 0px 1px 0px rgba(0,73,140,0.3);
}
.my-style:hover {
  box-shadow: inset 0px 3px 1px 0px rgba(83,154,197,0.5),
              inset 3px 0px 1px 0px rgba(83,154,197,0.2),
              inset 0px -3px 1px 0px rgba(0,73,140,1),
              inset -3px 0px 1px 0px rgba(0,73,140,0.5);
}
</style>
<button type="button" class="btn btn-primary my-style">GAME</button>

You can always use the image itself as a button: Embed image in a <button> element

Custom button with bootstrap4

1 Answers1