CSS - How to create a button or design like this reversed

Asked

Viewed 138 times

-6

I would like to know how to create a box just like the yellow button of the image below.

I would simply like to know how to flip sides using CSS and HTML.

Imagem

css
  • 1

    Post the code already made so we can help.

  • That’s the problem I haven’t done, because I don’t know how to do it. or how... on the side like this

  • And what the hell are they always giving negative? This is to help or expel 99% of users????

  • 1

    You’re +2/-4 at the moment. I think the problem is that in the first version of the question, before the edits, the image was in a link format instead of being in the question. In this way, some people may not have understood your question and thought it was a poorly formed question. The text of the question also had to go through a review to get legal and some people may not have understood it as it was at the beginning.

  • 3

    The community is precisely to help! Not to do the work for you..

2 answers

6

Can be done with CSS2 and borders, without distorting the text:

.trapezio{
  display:block; position:relative; float:left;
  margin:20px;
  width:200px;                             /* largura da caixa */
  line-height:50px;                        /* altura da caixa  */
  text-align:center;
}

.trapezio:before {
  content:'';
  display:block; position:absolute;
  z-index:-1; width:0; height:100%;
  top:-10px;                               /* = angulo         */ 
  border-right: 200px solid #ccc;          /* largura da caixa */
  border-top: 10px solid transparent;      /* angulo da caixa  */
  border-bottom: 10px solid transparent;   /* angulo da caixa  */
}

.amarelo:before  {border-right-color:#fe0;}
.azul:before     {border-right-color:#36f;}
.vermelho:before {border-right-color:#f31;}
<a class="trapezio"          href="#">BUY NOW</div>
<a class="trapezio amarelo"  href="#">BUY NOW</div>
<a class="trapezio azul"     href="#">BUY NOW</div>
<a class="trapezio vermelho" href="#">BUY NOW</div>

  • This is the same concept to create arrow distortion with pseudo-element, very good.

  • Have a cool post on the site already talking about trapezoidal div or at least inclined, I’ll see if I find later.

  • but I want to do using the "a" of LINK... and also be able to use various colors, SUCCESS, DEFAULT... ERROR in link to ?

  • 2

    @Snoopy12 and what’s the problem? This has nothing to do with what is in the question (and also does not change anything in the solution, I used yellow pq was what you put in the question, if change the border color, it is as you want).

  • Sure, but I ordered Butao, not div.

  • But anyway, can you tell me how to do in <aaa> Links?

  • no matter what the element does, it gives anyway. Only by a <a href="caminho"> around

  • I punished it didn’t get right

  • http://jsfiddle.net/81oregbj/19/ I tried to afzer here in a good way and as I wanted to see http://jsfiddle.net/81oregbj/19/

  • remember to put a display:block on . trapezioyellow

  • You can edit this link until you become right sff

  • Okay, I switched to straight A on the answer. Other tweaks you can make using CSS normally, or refer to more specific posts here on the site itself.

  • Okay I saw, this good, but the idea was that it was a universal butao, below could create one more ". buttao2" with different background...and always so.. is piossivel do there, because that is with Borders... and I tested and not da

  • Dear @Snoopy12 if you want colors for SUCCESS, DEFAULT... ERROR just create a class for each one, as .btnsuccess { border-right: 200px solid #<cor success>; } .btnerror { border-right: 200px solid #<cor error>; }, etc. Just study the basics of CSS and learn how the selectors work, the rest is to adapt.

  • I can order a thin one too?

Show 10 more comments

3


Use the CSS property transform with perspective and rotateY. For example:

#botao {
    background: yellow;
    width: 200px;
    padding: 10px;
    text-align: center;
    font-size: 20pt;
    font-weight: bold;
    transform: perspective(10px) rotateY(-1deg);
}
<div id="botao">BUY NOW</div>

Another way of doing this, without distorting the text (suggested by Mr Bacco), would be like this:

.botao {
    position: relative;
    width: 200px;
    padding: 10px;
    text-align: center;
    font-size: 20pt;
    font-weight: bold;
}

.botao:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: -15px;  /* compensação da rotação*/
    z-index: -1;
    background: yellow;
    width: 100%;
    height: 100%;
    transform: perspective(10px) rotateY(-1deg);
}
<div class="botao">BUY NOW</div>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.