CODEWITHSUNDEEP
css
silow
silow

Reputation: 4306

Styling a button of irregular shape

Is it possible to create a somewhat irregular shaped button.

My button has the following css which makes it a simple rectangle. 

.btnclass { 
   width:100; 
   height:40; 
}

but it want to make look more like this:

 ______________________
|           ___________|
|           |___________
|______________________|

Any clever ideas to accomplish this with CSS?

Upvotes: 0

Views: 3454

Answers (4)

Rizenup
Rizenup

Reputation: 1

Better to use some shapes instead of styling

Upvotes: 0

D.Nibon
D.Nibon

Reputation: 2919

Go with an image button. <input type="image" ... /> or <button><img src="" /></button> If not, the suggestions below aren't optimal but that's because an image is probably the most optimal solution.

  1. Setting a background-image with the desired shape. I think this is the most pure solution so go for this. background-image: url(whole-image.png);

  2. Setting a background color and a small background-image located at the top right corner. The solution is something similar to the "rounded-corner-hack" out there. background: #<button-color> url(small-image.png) top right no-repeat;

Upvotes: 0

George Marshall
George Marshall

Reputation: 327

Not really without a bunch of CSS hackery, your best bet is to use images.

If your attempting to do so for form buttons look at using the following

<input type="image" src="image_path.png" alt="image description" />

Upvotes: 0

Breezer
Breezer

Reputation: 10490

I don't think you can, your better off using an image that's shaped as you want

Upvotes: 1

Related Questions