Issue
is there a way to create such button in css? The one with "blog" text. I tried adding a div into each corner, giving these divs borders and rotating them, but as you can see (the Anout Me btn) it is not the best solution as the corners don't fit accurately.
Thank you for your ideas!
Solution
There is no CSS rule to do it, but it is possible. You would need a inline-block
or block
element for your button, with a border on the left and right side. Then, you would need to place (with absolute
positioning) two pseudo-elements ::before
and ::after
on the top and bottom part of the container. Simply add perspective and rotate the X value of the elements accordingly and you're good to go. It might not be "pixel perfect" on every device but it'll look damn near perfect on most recent devices and browsers.
You can have a look at these hexagonal buttons I made a little while ago to get a better idea: https://codepen.io/chriskirknielsen/pen/MpXKVV
EDIT: Here's a code snippet instead of a Codepen link:
*, *::before, *::after {
padding: 0;
margin: 0;
box-sizing: border-box;
transition: .25s all .02s ease-in-out;
}
body, html {
text-align: center;
font-family: sans-serif;
font-size: 32px;
background-color: #123143;
height: 100%;
}
.button--hexagon {
position: relative;
margin: 1rem auto;
text-align: center;
font-size: .5rem;
line-height: .5rem;
vertical-align: middle;
color: #ffce00;
display: inline-block;
border-width: 0;
border-style: solid;
border-color: #ffffff;
padding: .5rem;
cursor: pointer;
background: transparent;
width: calc(100% / 6);
}
.button--hexagon span {
z-index: 20;
position: relative;
}
.button--hexagon::before, .button--hexagon::after {
content: '';
position: absolute;
border-color: inherit;
border-style: inherit;
height: 50%;
width: 100%;
left: 0;
z-index: 10;
background-color: rgba(18, 49, 67, 0.75);
}
.button--hexagon::before {
border-width: 2px 2px 0 2px;
top: 0;
transform-origin: center bottom;
transform: perspective(0.5rem) rotateX(3deg);
}
.button--hexagon::after {
border-width: 0 2px 2px 2px;
bottom: 0;
transform-origin: center top;
transform: perspective(0.5rem) rotateX(-3deg);
}
.button--hexagon:hover {
color: #123143;
border-color: #ffce00;
}
.button--hexagon:hover::before,
.button--hexagon:hover::after {
background: #ffce00;
}
<button class="button--hexagon"><span>Some text</span></button>
Answered By - chriskirknielsen
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.