Make a custom button css

Question

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

My result comes out to this

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

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?

height:50px;background? What are you expecting that to do? — Callat
– Callat, Commented Jan 23, 2018 at 18:14

arbuthnott · Accepted Answer · 2018-01-23 18:22:06Z

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.

answered Jan 23, 2018 at 18:22

arbuthnott

3,8192 gold badges10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dutchkillsg Over a year ago

That was very well explained and gave me a better idea on how to structure my buttons. Thank you very much!

ReGo · Accepted Answer · 2020-12-01 11:16:08Z

0

<button class="md-btn md-btn-small md-btn-primary" type="submit">
 Signup</button>

would work (you would need bootsrap)

answered Dec 1, 2020 at 11:16

ReGo

132 bronze badges

Collectives™ on Stack Overflow

Make a custom button css

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related