2

I am trying to build out my own signup and signin button

My result comes out to this

enter image description here

What I am trying to achieve is along the lines of this

enter image description here

The image gets distorted and does not show the entirety of the icon I want displayed.

<div id="signup"><input type="submit" name="" value="">Sign up</div>

#signup{
background:url(../images/sign-up.png) no-repeat;
position: relative;
z-index: 1;
cursor:pointer;
border:none;
width:50px;
height:50px;
}

How do I achieve the desired affect of the button I want?

2
  • height:50px;background? What are you expecting that to do? Commented Jan 23, 2018 at 18:14
  • 1
    sorry left that in there by accident Commented Jan 23, 2018 at 18:18

2 Answers 2

1

Good for you - creating from scratch is the best way to learn css.

Your main issue is not setting the size of your background image. It is adding the background at full size, so you can't see most of it in your 50 x 50 button. If your background image is a square, you can try background-size: 50px 50px;. If you're not sure background-size: contain; may do what you want in this case.

Some bits of general advice:

  • Add a working border to your button (ex border: 1px solid red;) so you can see the dimensions, then remove it when you're finished.
  • Add your icon as the background image of some styled <span> (etc) tag inside your button, like this: <button class="signup"><span class="signup-icon"></span>Sign up</button>. Then you can style the span to the right size, etc, distinct from your button, place it relative to your text, etc.
Sign up to request clarification or add additional context in comments.

1 Comment

That was very well explained and gave me a better idea on how to structure my buttons. Thank you very much!
0
<button class="md-btn md-btn-small md-btn-primary" type="submit">
 Signup</button>

would work (you would need bootsrap)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.