CODEWITHSUNDEEP
htmlcssbutton
Eko Rudiyanto jay
Eko Rudiyanto jay

Reputation: 41

How to create an angled button with CSS and HTML5 without images

I have some problem with CSS. I want to create an angled button using CSS and HTML5, without images.

How to create it without images? I want the HTML5 output to be like this:

button1

I have tried this button:

border: solid 10px;
/* the border will curve into a 'D' */
border-radius: 10px 40px 40px 10px;

I also need to create this

button2

Any help is appriciated.

Upvotes: 0

Views: 106

Answers (2)

ahmednawazbutt
ahmednawazbutt

Reputation: 833

button.testBtn {
  height:50px;
  width:150px;
    background: blue;
    position: relative;
    border:none;
    text-align:left;
}
button.testBtn span{
font-weight:bold;
font-size:18px;
margin-left:10px;
}

button.testBtn:before {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    border-bottom: 50px solid white;
    border-left: 60px solid blue;
    width: 0;
}

/* ***************************************** */

button.myBtn {
  height:50px;
  width:150px;
    background: blue;
    position: relative;
    border:none;
    text-align:right;
}
button.myBtn span{
font-weight:bold;
font-size:18px;
}

button.myBtn:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    border-top: 50px solid white;
    border-right: 60px solid blue;
    width: 0;
}
<button class="testBtn">
<span>Button</span>
</button>

<br /><br /><br /><br />

<button class="myBtn">
<span>Button</span>
</button>

In Order to get shape as described in later comment. Please check btn with class myBtn

Upvotes: 1

Harden Rahul
Harden Rahul

Reputation: 948

You can use this 

.class{
background:#0077dd;
color:#fff;
padding:10px 20px;
    position: relative;
  display:inline-block;
  height:20px;
  
  }

a.class:after {
    width: 0;
    height: 0;
    border-top:40px solid #0077dd;
    border-right: 40px solid transparent;
    position: absolute;
    top: 0;
    right: -40px;
    content:"";
}
<a class="class">Button</a>

Upvotes: 1

Related Questions