I'm trying to create a button like this:
After researching online, I only came up with making a parallelogram. But this is the result:
Code:
.parallelogram {
width: 100px;
height: 50px;
transform: skew(25deg);
background: black;
border: 1px solid #EC00F4;
color: white;
box-shadow: 0px 3px 8px #EC00F4;
}<button class="parallelogram"> Hello button </button>Is there a way to make the edges go where I want (like in the picture) but without moving the text ?
Use clip-path on pseudo elements. The trick is to consider the same clip-path and apply a scale transformation to one pseudo element to simulate the border. Simply adjust the value of the polygon to get the needed result.
Hover to see a different clip-path:
.parallelogram {
padding:20px 45px;
font-size:30px;
color: white;
border:none;
background:none;
outline:none;
position:relative;
z-index:0;
margin:15px;
filter:drop-shadow(0px 30px 25px rgba(236, 0, 244, 0.45));
}
.parallelogram:before,
.parallelogram:after {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
clip-path: polygon(0 11%, 100% 0, 90% 88%, 3% 96%);
transition:1s all;
background:#000;
}
.parallelogram:before {
background:#EC00F4;
transform:scale(1.05,1.12);
}
.parallelogram:hover:before,
.parallelogram:hover:after {
clip-path: polygon(5% 2%, 100% 5%, 100% 100%, 0% 94%);
}<button class="parallelogram"> Hello button </button>
<button class="parallelogram"> button </button>
<button class="parallelogram"> A </button>You can also consider pixel value to keep the same shape whataver the content inside:
.parallelogram {
padding:20px 45px;
font-size:30px;
color: white;
border:none;
background:none;
outline:none;
position:relative;
z-index:0;
margin:15px;
filter:drop-shadow(0px 30px 25px rgba(236, 0, 244, 0.45));
}
.parallelogram:before,
.parallelogram:after {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
clip-path: polygon(0 10px, 100% 0, calc(100% - 8px) calc(100% - 15px), 5px calc(100% - 8px));
transition:1s all;
background:#000;
}
.parallelogram:before {
background:#EC00F4;
transform:scale(1.05,1.12);
}
.parallelogram:hover:before,
.parallelogram:hover:after {
clip-path: polygon(0 5px, 100% 0, 100% 100%, 10px calc(100% - 20px));
}<button class="parallelogram"> Hello button </button>
<button class="parallelogram"> button </button>
<button class="parallelogram"> A </button>
This works kinda like you want it:
button{
width: 150px;
height: 50px;
-webkit-clip-path: polygon(0% 20%, 92% 14%, 88% 88%, 0% 100%);
clip-path: polygon(0% 20%, 92% 14%, 88% 88%, 0% 100%);
background: black;
color: white;
}<button class="parallelogram"> Hello button </button>EDIT:
You can create an SVG that looks exactly like your button here: https://vectr.com/new
You can add border + shadow and simply copy the html.
You could use a pseudo element to set your perspective effect:
example
.parallelogram {
width: 100px;
height: 50px;
position: relative;
color: white;
/* appearance:none; could be used too */
background: none;
border: none;
cursor: pointer; /* show where and that i'm clickable */
}
.parallelogram:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 110%; /* might need to be resized */
height: 100%;
transform: /* tune the rotation and perspective values to your needs */
perspective(200px)
rotatey(35deg)
rotatex(-25deg)
;
background: black;
border: 2px solid #ec00f4;
box-shadow: 0px 3px 8px #ec00f4;
}<button class="parallelogram"> Hello button </button>screenshot from firefox : 
Add a span, with the class .unskew and do the opposite of your skew effect on the background and change the display rule.
Example:
CSS
.parallelogram {
transition: background 0.3s;
transform: skew(-25deg);
/* SKEW */
}
.unskew{
display: block;
/* block or inline-block is needed */
text-decoration: none;
padding: 5px 10px;
font: 30px/1 sans-serif;
transform: skew(25deg);
/* UNSKEW */
color: inherit;
}
HTML
<button class="parallelogram"><span class="unskew" >Hello button</span></button>
