Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I need ideas on how to make a button look like this:
I don't know how to make square corners like that and I can't find any solutions online. Also, on hover, the border should be all around the button (just a normal 2px border.)
Here's a pure CSS solution using absolutely positioned pseudo-elements, meaning you wouldn't have to create any images. What this method does is actually create four elements inside the button. Those elements are positioned in each of the four corners and given a border on two sides.
Non-fancy, no transition: (Give the button a border on hover)
body {
background-color: black;
}
button {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background: none;
border: none;
cursor: pointer;
color: white;
padding: 0;
box-sizing: content-box;
border: 2px solid transparent;
}
button::before, button::after, span::before, span::after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
}
button::before {
top: -2px;
left: -2px;
border-top: 2px solid white;
border-left: 2px solid white;
}
button::after {
top: -2px;
right: -2px;
border-top: 2px solid white;
border-right: 2px solid white;
}
span::before {
bottom: -2px;
left: -2px;
border-bottom: 2px solid white;
border-left: 2px solid white;
}
span::after {
bottom: -2px;
right: -2px;
border-bottom: 2px solid white;
border-right: 2px solid white;
}
button:hover {
border: 2px solid white;
}
<button><span>BUTTON</span></button>
Fancy, with transition: (animate our pseudo-elements to occupy the full height/width of the button)
body {
background-color: black;
}
button {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background: none;
border: none;
cursor: pointer;
color: white;
padding: 0;
box-sizing: content-box;
border: 2px solid transparent;
}
button::before, button::after, span::before, span::after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
}
button::before {
top: -2px;
left: -2px;
border-top: 2px solid white;
border-left: 2px solid white;
transition: 0.5s all;
}
button::after {
top: -2px;
right: -2px;
border-top: 2px solid white;
border-right: 2px solid white;
transition: 0.5s all;
}
span::before {
bottom: -2px;
left: -2px;
border-bottom: 2px solid white;
border-left: 2px solid white;
transition: 0.5s all;
}
span::after {
bottom: -2px;
right: -2px;
border-bottom: 2px solid white;
border-right: 2px solid white;
transition: 0.5s all;
}
button:hover::before, button:hover::after {
width: 50px;
height: 50px;
}
button:hover span::before, button:hover span::after {
width: 50px;
height: 50px;
}
<button><span>BUTTON</span></button>
Offhand, I can see two ways to do this.
The first way is by using CSS's border-image to slice up an image into slices and use it as the border. You'll create an image that has the four square corners in the upper left, upper right, lower left, and lower right, and then control how the image is divided into the nine quadrants.
It'll depend on your source image, but see here for an example usage and example image:
https://www.w3schools.com/cssref/css3_pr_border-image.asp
The second is by having four elements and positioning them outside the button box. This is more work and not necessary, so I'd go with the first method.
You can use the svg tag to make the corners. something like this:
<!DOCTYPE html>
<html>
<body>
<h1>My SVG</h1>
<div style = "position:absolute; top: 280px; right: 100px; background-color:blue;">
<svg width="200" height="100">
<line x1="5" y1="5" x2="25" y2="5" stroke="green" stroke-width="4"/>
<line x1="5" y1="5" x2="5" y2="25" stroke="green" stroke-width="4"/>
</svg>
</div>
</body>
</html>
this will make a blue box with a green corner on the upper left hand side. You can add the other three corners. You could then use css to put a rectangle over the top when you hover over the button.
Related
I am finding that applying a transform:skewX() to an element blurs its poition vertically(!) in Firefox. Does anyone know why, or how to fix this?
HTML
<div id="tab"><span>Tab</span></div>
<div id="content">Content</div>
CSS
#tab {
display: inline-block;
margin-left: 2em;
position: relative;
width: 3em;
text-align:center;
padding: .375em 0 0.125em;
}
#tab span {
position: relative;
z-index: 10;
}
#tab:before,
#tab:after {
position: absolute;
content: '';
top: 0;
width: 60%;
height: 100%;
border-top: 2px solid #999999;
background-color: #ffffff;
z-index: 1;
}
#tab:before {
left: 0;
transform: skewX(-20deg);
border-left: 2px solid #999999;
border-top-left-radius: 6px;
}
#tab:after {
right: 0;
transform: skewX(20deg);
border-right: 2px solid #999999;
border-top-right-radius: 6px;
}
#content {
border: 2px solid #999999;
border-radius: 6px;
padding: 4px;
margin-top: 0px;
}
The result is as below (zoomed image). Note the #content box's border showing through where they don't overlap, and the fuzziness at the top of the tab (both above and below the 2px width). By comparrison, when removing the skewX() for a straight tab, the border becomes pixel-perfect.
Is there any way to force the element's vertical pixel-alignment when it is subjected to a skewX() transform?
I want to recreate the button and the border around the League of Legends Play For Free button.
The problem for me is recreating that border with the cut corners. I do not need the animations.
After inspecting their page elements, I could not find any elements responsible for them, and they do not seem to be using CSS to achieve this. I tried turning off a lot of the CSS, and they seem to persist on the page. Could someone please enlighten me on how they are making these borders, or how I can achieve this with pure CSS?
Do you mean a button like the one in this example?
https://codepen.io/awesammcoder/pen/RYVwxa
body {
background: #333;
}
.button {
font-size: 12pt;
color: white;
background: transparent;
display: inline-block;
text-decoration: none;
padding: 10px 20px;
border: 3px solid white;
margin: 20px;
position: relative;
letter-spacing: 1px;
outline: none;
}
.button:before {
content: '';
width: 20px;
height: 20px;
background: #333;
border: 3px solid white;
transform: rotate(45deg);
position: absolute;
border-top: 0;
border-left: 0;
border-bottom: 0;
top: -12px;
left: -13px;
}
.button:after {
content: '';
width: 20px;
height: 20px;
background: #333;
border: 3px solid white;
transform: rotate(-132deg);
position: absolute;
border-top: 0;
border-left: 0;
border-bottom: 0;
top: auto;
right: -13px;
bottom: -12px;
}
<button class="button">Play now</button>
I'm trying to absolute position an arrow relative to a button that toggles a filter box using :before pseudo-element.
I think I can't position relative to the filter box because its width is related to other div and I need the triangle to be aligned with the outside button.
Problem: when button is focused, the outline is present both in button and its :before, aka my triangle. I'm searching for a solution that outlines the button, but not its :before.
What I've already tried: set the rule outline: none; in the :before selector. Didn't worked.
What I've achieved:
My code, simplified for question purpose:
/* Toggle control isn't necessary for the purpose of the question */
.button-filter {
background-color: #333;
color: $click-white;
position: relative;
border: none;
color: #fff;
padding: 1em;
}
.button-filter:before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
left: calc(50% - 15px);
bottom: -20px;
border-bottom: 15px solid #333;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
<button class="button-filter" autofocus>Filter</button>
You can change the outline with a box-shadowto avoid this effect:
.button-filter {
background-color: #333;
position: relative;
border: none;
color: #fff;
padding: 1em;
}
.button-filter:before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
left: calc(50% - 15px);
bottom: -20px;
border-bottom: 15px solid #333;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
.button-filter:focus {
outline:none;
box-shadow:0 0 5px blue;
}
<button class="button-filter" autofocus>Filter</button>
Asuming that the pseudo will used to create an arrow next to another element, you don't really need it to be a triangle, it can be a rotated square. The lower part of it will be hidden by the other div.
If this is the case, the you can set the pseudo as a small square located inside the button. I set it red to show where it is, but in production you can set background transparent, or set z-index : -1;
And then set a shadow, located where you want the triangle to be. Since this is a shadow, not a real element, the outline won't be applied to it. (Note: the element is rotated, so the shadow coordinates are tricky)
/* Toggle control isn't necessary for the purpose of the question */
.button-filter {
background-color: #333;
color: $click-white;
position: relative;
border: none;
color: #fff;
padding: 1em;
}
.button-filter:after {
content: "";
position: absolute;
display: block;
width: 5px;
height: 5px;
left: 50%;
bottom: 10px;
transform: rotate(45deg);
background-color: red;
box-shadow: 40px 40px 0px 10px black;
}
<button class="button-filter" autofocus>Filter</button>
How would I achieve the following as seen in the image below, in the best way as possible? I want a thick top border, but as it goes down I want the sides to become thinner and just "mend" (if that's right expression) into the black block.
This is my CSS code for the black block:
.containerMain {
background: #000;
padding: 15px;
border-radius: 5px;
width: 250px;
}
You can use the after pseudo-element to position an upside-down trapezoid behind your element.
Look here for a trapezoid shape example.
body { padding: 30px; }
.containerMain {
background: black;
padding: 15px;
border-radius: 5px;
width: 250px;
height: 250px;
position: relative;
}
.containerMain:after {
content: '';
border-radius: inherit;
margin: -20px;
margin-top: -25px;
width: 100%;
height: 50%;
position: absolute;
z-index: -1;
/* upside-down red trapezoid props */
border-top-width: 150px;
border-top-style: solid;
border-top-color: red;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
<div class="containerMain"></div>
I would like to make a button like these one just with CSS without using another element.
Button Image
Since the button has a border attached, I think I normally need both, the :before and :after elements to create just one arrow at one side. So to make one arrow at each side I would need another span element inside the link.
The second method I tried is the one you see below. But with this solution they are not properly centered and each side of the arrow is different in length.
Has someone a solution?
/* General Button Style */
.button {
display: block;
position: relative;
background: #fff;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 20px;
text-decoration: none;
text-transform: uppercase;
color: #e04e5e;
margin: 40px auto;
font-family: Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
/* Button Border Style */
.button.border {
border: 4px solid #e04e5e;
}
.button.border:hover {
background: #e04e5e;
color: #fff;
}
/* Button Ribbon-Outset Border Style */
.button.ribbon-outset.border:after,
.button.ribbon-outset.border:before {
top: 50%;
content: " ";
height: 43px;
width: 43px;
position: absolute;
pointer-events: none;
background: #fff;
}
.button.ribbon-outset.border:after {
left: -3px;
margin-top: -40px;
transform-origin: 0 0;
box-sizing: border-box;
border-bottom: 4px solid #e04e5e;
border-left: 4px solid #e04e5e;
transform: rotate(57.5deg) skew(30deg);
}
.button.ribbon-outset.border:before {
right: -46px;
margin-top: -40px;
transform-origin: 0 0;
box-sizing: border-box;
border-top: 4px solid #e04e5e;
border-right: 4px solid #e04e5e;
transform: rotate(57.5deg) skew(30deg);
}
.button.ribbon-outset.border:hover:after {
background: #e04e5e
}
.button.ribbon-outset.border:hover:before {
background: #e04e5e
}
Click me!
CodePen Demo
Here is another alternate way to get this done with only one element.
This approach works like below:
Two pseudo-elements :before and :after which are about half the size (including borders) of the main .button element. The height of each pseudo-element is 34px + 4px border on one side (top/bottom) and 2px on the other side.
The top half of the shape is achieved using the :before element whereas the bottom half is achieved using the :after element.
Using a rotateX with perspective to achieve the tilted effect and positioning to place the two elements such that they form the expected shape.
/* General Button Style */
.button {
position: relative;
display: block;
background: transparent;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 20px;
text-decoration: none;
text-transform: uppercase;
color: #e04e5e;
margin: 40px auto;
font-family: Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
.button:before,
.button:after {
position: absolute;
content: '';
width: 300px;
left: 0px;
height: 34px;
z-index: -1;
}
.button:before {
transform: perspective(15px) rotateX(3deg);
}
.button:after {
top: 40px;
transform: perspective(15px) rotateX(-3deg);
}
/* Button Border Style */
.button.border:before,
.button.border:after {
border: 4px solid #e04e5e;
}
.button.border:before {
border-bottom: none; /* to prevent the border-line showing up in the middle of the shape */
}
.button.border:after {
border-top: none; /* to prevent the border-line showing up in the middle of the shape */
}
/* Button hover styles */
.button.border:hover:before,
.button.border:hover:after {
background: #e04e5e;
}
.button.border:hover {
color: #fff;
}
<!-- Library included to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
Click me!
Fixed Width Demo | Dynamic Width Demo
Output Screenshot:
This is tested in Chrome v24+, Firefox v19+, Opera v23+, Safari v5.1.7, IE v10.
As-is, this would degrade quite well in IE 8 and IE 9 into a square button with borders. However, due to the nullification of one border (border-bottom for :before and border-top for :after) it would leave a white area (resembling a strike-through line) in the middle. This can be overcome by adding a couple of IE < 10 specific styles using conditional comments like in this demo.
<!--[if IE]>
<style>
.button.border:after{
top: 38px;
}
.button.border:hover:before, .button.border:hover:after {
border-bottom: 4px solid #e04e5e;
}
</style>
<![endif]-->
Output Screenshot from IE 9 and IE 8:
This is just a simpler alternative to Harry's answer.
This approach uses scale() and rotate(45deg) transforms. Using this approach, you can very easily change the angle of right and left chevrons.
Fiddle
div {
height: 70px;
width: 200px;
margin-left: 40px;
border-top: 4px solid #E04E5E;
border-bottom: 4px solid #E04E5E;
position: relative;
text-align: center;
color: #E04E5E;
line-height: 70px;
font-size: 21px;
font-family: sans-serif;
}
div:before, div:after {
content:'';
position: absolute;
top: 13px;
height: 40px;
width: 40px;
border: 4px solid #E04E5E;
-webkit-transform: scale(0.8,1.25) rotate(45deg);
-moz-transform: scale(0.8,1.25) rotate(45deg);
-ms-transform: scale(0.8,1.25) rotate(45deg);
transform: scale(0.8,1.25) rotate(45deg);
}
div:before {
left: -22px;
border-top: 0px solid transparent;
border-right: 0px solid transparent;
}
div:after {
right: -22px;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
}
div:hover, div:hover:before, div:hover:after {
background-color: #E04E5E;
color: #EEE;
}
<div>HELLO!</div>
Want a wider arrow? Simply decrease scale() transform's x value : Fiddle (wide)
Narrower one? Increase scale() transform's x value : Fiddle (narrow)
Note: IE 8 and below don't support CSS Transforms (9 supports with -ms- prefix), so you can check out this site for supporting them: IE Transform Translator
I forked your Pen
Codepen Demo
The essential changes are that I removed the side borders from the main button (as they were superflous
/* Button Border Style */
.button.border {
border-top: 4px solid #e04e5e;
border-bottom: 4px solid #e04e5e;
}
and changed a couple of values to tweak it all into place
/* Button Ribbon-Outset Border Style */
.button.ribbon-outset.border:after,
.button.ribbon-outset.border:before {
top: 50%;
content: " ";
height: 43px;
width: 43px;
position: absolute;
pointer-events: none;
}
.button.ribbon-outset.border:after {
left:0;
margin-top:-40px;
transform-origin:0 0;
box-sizing:border-box;
border-bottom:4px solid #e04e5e;
border-left:4px solid #e04e5e;
transform:rotate(57.5deg) skew(30deg);
}
.button.ribbon-outset.border:before {
right:-43px;
margin-top:-40px;
transform-origin:0 0;
box-sizing:border-box;
border-top:4px solid #e04e5e;
border-right:4px solid #e04e5e;
transform:rotate(57.5deg) skew(30deg);
}
I got the answer myself. It was a problem of the transform property of the :before and :after elements.
CSS changed:
/* Button Border Style */
.button.border {
border-top:4px solid #e04e5e;
border-bottom:4px solid #e04e5e;
}
/* Button Ribbon-Outset Border Style */
.button.ribbon-outset.border:after, .button.ribbon-outset.border:before {
height: 42px;
width: 42px;
}
.button.ribbon-outset.border:after {
left:0;
border-bottom:5px solid #e04e5e;
border-left:5px solid #e04e5e;
transform:rotate(45deg) skew(19deg,19deg);
}
.button.ribbon-outset.border:before {
right:-42px;
border-top:5px solid #e04e5e;
border-right:5px solid #e04e5e;
transform:rotate(45deg) skew(19deg,19deg);
}
Updated Codepen