-1

I've designed a mobile video chat website UI in Sketch and used a plugin to convert the design into HTML and CSS. I need to turn what are now button images into actual buttons. Here is what the code looks like

I need to make this image with text into a button

</div>
<div class="startbutton">
    <img anima-src="./img/iphone---during-chat-btn 1@2x.png" class="btn-view" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>
    <div class="start">
        START
    </div>
Roddy of the Frozen Peas
  • 14,380
  • 9
  • 49
  • 99
bandersnatch
  • 1
  • 1
  • 2
    Can you add the code snippet else we can't help you – Anoop Mc Jan 10 '19 at 20:59
  • added - sorry I didn't know how to make my code show as is – bandersnatch Jan 10 '19 at 22:41
  • So what's the problem? Anything can be a "button" with some styling and a click handler. Otherwise if you're asking how to make a button with an image, there's this question: https://stackoverflow.com/questions/8683528/embed-image-in-a-button-element – Roddy of the Frozen Peas Jan 10 '19 at 22:45
  • 1
    Hi, welcome to SO! Unfortunately with small snippet provided (which by the way appears to generate invalid markup) but we don't have much context to go by here since there's no way of knowing what the classes are doing, or what that .png looks like, or even the base64 img src is invalid, which makes this a tough one to troubleshoot. It's generally frowned upon to ask for something for you based on an image without effort shown here, so you might expect some down-votes. Though don't let it dissuade you. Think of it as an opportunity to actually learn html/css so you don't need tools anymore! :) – Chris W. Jan 10 '19 at 23:02

2 Answers2

0
 <button> click me! </button>

.button {
        background-image: url ('/image/img1.jpeg') no-repeat;`enter code here`
        cursor:pointer;
    }

Here you can add the image background to a button which full the button background with an image.

Nipun Ravisara
  • 3,629
  • 3
  • 20
  • 35
0

Wrap it in a button tag. Or, make it look like a button with padding and border.