Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Advice on how to create this button shape

Advice on how to create this button shape

Problem

I would like to create a button that has 2 slight wings either side but not completely sure how to achieve this shape and was wondering if anyone could offer some guidance?

enter image description here

I understand that I will need to use the before and after psuedos but unsure how to create that slight curve going into the main body of the button?

Problem courtesy of: styler

Solution

To give the impression of a 3d plane rotating away from POV, like Star Wars opening crawls (recreated in svg too), use (prefixed) perspective and rotate3d (or rotateX).

To prevent aliasing, use an 1px transparent outline, as described here.

Running example

#trapezoid {
    -webkit-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
       -moz-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
         -o-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
        -ms-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
            transform : perspective(400px) rotate3d(1, 0, 0, 20deg);

        border-radius : 5px 5px 0 0;
              outline : 1px solid transparent;
}

If you instead do not want the text to be rotated, apply the code above to the ::before pseudo element, absolutely positioned relatively to its parent:

Running example with non rotated text

Code:

#trapezoid {    
         width : 200px;
        height : 50px;
        margin : 10px;
       padding : 10px;
      position : relative;
    text-align : center;
}

#trapezoid::before {
    -webkit-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
       -moz-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
         -o-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
        -ms-transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
            transform : perspective(400px) rotate3d(1, 0, 0, 20deg);
              outline : 1px solid transparent;
        border-radius : 5px 5px 0 0;
             position : absolute;
                  top : 0;
               bottom : 0;
                 left : 0;
                right : 0;
              content : '';
              z-index : -1;
           background : red;
}
Solution courtesy of: Andrea Ligios

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Advice on how to create this button shape

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×