CODEWITHSUNDEEP
htmlcssbutton
HpdsbuΖt
HpdsbuΖt

Reputation: 103

Change button shape html/css

I'm working on an html project,making a website and i have added a navigation bar/menu by creating buttons for each menu choice.

My button is the black one and i want its shape to become like the red one button. enter image description here

here is my code css that sets the shape of my button:

Ignore the colors.My problem is how to change that shape and nothing else. Any ideas?

li {
    display: inline;
    border: 0px solid #000000;
    font-family: Futura, Tahoma, sans-serif;
    color: #ffffff;
    padding: 25px;
    border-radius: 1px 1px ;
    background-color: #cc0323
}

Upvotes: 0

Views: 13354

Answers (2)

Zeal
Zeal

Reputation: 464

From the sound of the question, you want the shape to change without affecting the text. The best way to achieve this, is the ::before or ::after pseudo-elements.

li {
  border: 0px;
  display: inline-block;
  position: relative;
  z-index: 1;
  border: 0px solid #000000;
  background-color: transparent;
  font-family: Futura, Tahoma, sans-serif;
  color: #ffffff;
  padding: 25px;
  margin-left: 20px;
}
li::after {
  content: "'";
  color: transparent;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
  border-radius: 3px;
  background-color: #cc0323;
  transform: skew(-30deg);
-webkit-transform: skew(-30deg);
-o-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
}

Here's what it looks like: http://jsbin.com/aCIQupeJ/2

Upvotes: 3

Abraham Hamidi
Abraham Hamidi

Reputation: 13809

Use transform:skew on the x-axis. Ex:

transform: skew(-30deg);
-webkit-transform: skew(-30deg);
-ms-transform: skew(-30deg);

should give you about what you want. However, you cannot use it on inline elements, so you'll have to change that (to inline-block, maybe):

li {
    display: inline-block;
    border: 0px solid #000000;
    font-family: Futura, Tahoma, sans-serif;
    color: #ffffff;
    padding: 25px;
    border-radius: 1px 1px ;
    background-color: #cc0323
    transform: skew(-30deg);
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
}

DEMO

Upvotes: 2

Related Questions