Create button with octagonal border using only html and css

Question

Create button with octagonal border using only html and css

Navigation

#1 by (3 votes)
#2 by (3 votes)

2

I need to create a button with octagonal borders as in the attached example, but I was not successful.

I need a white border and the background is free so you can change color when you apply :hover .

I count on your help, thank you.

html css css3

asked by anonymous 19.01.2016 / 22:12

2 answers

How to open an .fdb file? How to get only the date, without the time, of a DateTime?

score 3 · Answer 1

Try SVG:

body { background-color: #FBA323 }

.svg-button path {
  fill: transparent;
  stroke: #fff;
  stroke-width: 2px
}

.svg-button tspan {
  fill: #fff
}

<svg class='svg-button'>
  <a xlink:href='#'> <!-- link do recurso que será chamado ao clicar -->
  <g>
    <path d='M0 10 10 0 190 0 200 10 200 50 190 60 10 60 0 50 Z'/>
    <text y='35'>
      <tspan x='60'>Ver obras</tspan>
    </text>
    </g>
  </a>
</svg>

In that other answer I explained what that M means (Move To ) in the element <path> , I also left an image explaining how the command works.

It was not clear what you meant by "leaving the background free", so I chose to leave the transparent path background and only use the borders ( stroke ), so it will use the background color of the parent element.

If you need to change the background of the button, simply change the fill property to your preferred color, such as:

.svg-button path {
  fill: red; /* Vermelho ficaria melhor?! :) */
  stroke: #fff;
  stroke-width: 2px
}

Remembering that :hover works normally when applied to an SVG, including transition properties:

.svg-button {
  height: 62px;
  width: 202px
}

.svg-button path {
  fill: #3498db;
  stroke: #2980b9;
  stroke-width: 2px;
  transition: all 300ms ease-in
}

.svg-button tspan {
  fill: #fff
}


/* Hover! */
.svg-button:hover path {
  fill: #1abc9c;
  stroke: #000
}

<svg class='svg-button'>
  <a xlink:href='http://pt.stackoverflow.com'>
  <g>
    <path d='M0 10 10 0 190 0 200 10 200 50 190 60 10 60 0 50 Z'/>
    <text y='35'>
      <tspan x='45'>StackOverflow</tspan>
    </text>
    </g>
  </a>
</svg>

score 3 · Answer 2

HTML & CSS

Well, it was not an easy task, but I guess it worked:

body{
  background: gold;
}
#octagon { 
  width: 100px; height: 50px; background: white; position: relative; 
  line-height: 45px;
  text-align: center;
  color: #fff;
} 
#octagon:before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  border-bottom: 10px solid white; 
  border-left: 10px solid #eee; 
  border-right: 10px solid #eee; 
  width: 80px; 
  height: 0; 
} 
#octagon:after { 
  content: ""; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  border-top: 10px solid white; 
  border-left: 10px solid #eee; 
  border-right: 10px solid #eee; 
  width: 80px; height: 0; 
}
#octagon #octagon-inner{ 
  width: 96px;
  height: 46px;
  background: gold;
  position: relative; 
  top: 2px;
  left: 2px;
} 
#octagon #octagon-inner:before { 
  content: "";
  position: absolute;
  top: 0;
  left: 0; 
  border-bottom: 10px solid gold; 
  border-left: 10px solid white; 
  border-right: 10px solid white; 
  width: 76px; 
  height: 0; 
} 
#octagon #octagon-inner:after { 
  content: "";
  position: absolute; 
  bottom: 0;
  left: 0;
  border-top: 10px solid gold;
  border-left: 10px solid white;
  border-right: 10px solid white;
  width: 76px;
  height: 0;
  z-index: 10;
}
#border-top:before{
  content: "";
  position: absolute; 
  top: 0;
  left: 0;
  border-bottom: 10px solid transparent;
  border-left: 10px solid gold;
  border-right: 10px solid transparent;
  width: 5px;
  height: 0;
  z-index: 15;
} 
#border-top:after{
  content: "";
  position: absolute; 
  top: 0;
  right: 0;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid gold;
  width: 5px;
  height: 0;
  z-index: 15;
} 
#border-bottom:before{
  content: "";
  position: absolute; 
  bottom: 0;
  left: 0;
  border-top: 10px solid transparent;
  border-left: 10px solid gold;
  border-right: 10px solid transparent;
  width: 5px;
  height: 0;
  z-index: 15;
} 
#border-bottom:after{
  content: "";
  position: absolute; 
  bottom: 0;
  right: 0;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid gold;
  width: 5px;
  height: 0;
  z-index: 15;
} 
#octagon:hover #octagon-inner:after{
  border-top-color: #dfbc00;
}
#octagon:hover #octagon-inner:before{
  border-bottom-color: #dfbc00;
}
#octagon:hover #octagon-inner{
  background-color: #dfbc00;
}

  <div id="octagon" >
    <div id="border-top" ></div>
    <div id="octagon-inner" > TESTE </div>
    <div id="border-bottom" ></div>
  </div>

In the above example you have a template made entirely in CSS and HTML, your application is not difficult, however its manipulation is, when it comes to customization. Its corners are not transparent, they are, in this case, the background color of body . Because of this, the printing.

SVG

body {
  background: gold;
}

#buttonRect{
  cursor: pointer;
}


#buttonRect:hover > polygon{
  fill: #dfbc00;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="buttonRect">
    <polygon id="button" points="40,5  130,5  145,20  145,60  130,75
                   40,75  25,60  25, 20" fill='#FFD700' style="stroke:#fff;stroke-width: 2;" />
    <text id="buttonText" x="60" y="45" fill="#fff">TESTE</text>
  </g>
</svg>

This solution in svg is much simpler to manipulate, it can be done by vector programs or even some online applications. And of much easier customization, the only thing more "laborious" will be the modification of the size by the coordinates of polygon , which even doing "in the hand" does not take long.

I used :hover on <g> that groups all button elements, as I explain

20.01.2016 / 01:21