I'm struggling to make a group button which background get changed on the active path, it may look something like this
I tried an approach but faced some border implementation errors in it, is that body have some better approach to make these button groups?
https://codesandbox.io/s/quizzical-bohr-uczl0?file=/src/App.js
With flex it's not going to work out. My idea is to have a before arrow and an after arrow on each other. The bottom arrow is 1px to the right:
.menu {
background: #efefef;
}
.item {
width: 140px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
color: #000;
background: #efefef;
position: relative;
display: inline-block;
float: left;
padding-left: 10px;
box-sizing: border-box;
}
.item.active{
background-color: #0172B6;
color: #fff;
}
.item:before{
content: '';
position: absolute;
right: -25px;
bottom: 0;
width: 0;
height: 0;
border-left: 25px solid #efefef;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index: 1
}
.item.active:before{
content: '';
position: absolute;
right: -25px;
bottom: 0;
width: 0;
height: 0;
border-left: 25px solid #0172B6;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index: 2
}
.item.active:after{
content: '';
position: absolute;
right: -26px;
bottom: 0;
width: 0;
height: 0;
border-left: 25px solid #efefef;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
z-index: 1
}
.menu .item:last-of-type:before,
.menu .item.active:last-of-type:before,
.menu .item.active:last-of-type:after{
display: none
}
<div class="menu">
<div class="item">Fabric</div>
<div class="item active">Style</div>
<div class="item">Contrast</div>
</div>
I'm wondering if there is a css only solution to display a link button like the one below. Any advises?
You can simply use pseudo elements and some border property then adjust the different values to get what you want:
.link {
padding: 10px;
display: inline-block;
width: 80px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
text-align: center;
position: relative;
overflow: hidden;
}
.link:before,.link:after {
content: "";
position: absolute;
height: 30px;
width: 30px;
border: 1px solid #000;
left: -19px;
top: 3px;
background: #fff;
transform: rotate(45deg);
transform-origin: center;
}
.link:after {
right: -19px;
left:auto;
}
link
I want to cut two corners of a button with a 3px solid border and no background, like the example below, preferably with only CSS. I tried many options and searched the web, but no luck so far... Do you guys know a way to achieve this? Thanks for any response!
What I got so far is:
a.button{
padding: 10px 18px;
border: 3px solid $blue;
text-transform: uppercase;
font-size: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
}
The problem is that this results in a radius corner, and I want the corners to be a straight cut.
This should help you get started.
You can refine it according to your needs.
.button {
display: inline-block;
text-transform: uppercase;
text-decoration: none;
padding: 10px 20px;
border: 3px solid #3777BC;
margin: 20px;
position: relative;
color: #3777BC;
letter-spacing: 1px;
}
.button:before {
content: '';
width: 20px;
height: 20px;
background: #fff;
border: 3px solid #3777BC;
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: #fff;
border: 3px solid #3777BC;
transform: rotate(-132deg);
position: absolute;
border-top: 0;
border-left: 0;
border-bottom: 0;
top: auto;
right: -13px;
bottom: -12px;
}
Newsletter Signup
I need to create the button styles in the image below (the one on the right is transparent, not white).
The bottom right corner is obviously the tricky part. It's not just a simple bevel; it's slightly rounded.
The best solution I've come up with is to apply an SVG image mask to a pseudo element positioned to the right of the button and reduce the right padding to compensate. But this approach has its limitations:
it requires a fixed height button (at least, if I want maintain the aspect ratio of the corner)
it requires a different SVG for each button size
I don't see how it can work for the transparent button style
So I'm hoping someone can suggest a different/better approach!
Thanks
UPDATE:
Here is my current approach - https://codepen.io/peteheaney/pen/jwVEPm
$primary: #FAB500;
*, *::after, *::before {
font-family: sans-serif;
box-sizing: border-box;
}
.button {
background-image: none;
border-width: 2px;
border-style: solid;
border-color: transparent;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-bottom: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
transition: all 0.2s;
&:active,
&:hover,
&:focus {
text-decoration:none;
}
&--large {
font-size: 15px;
padding-left: 24.818px;
height: 52px;
line-height: 52px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
position: relative;
margin-right: 24.818px;
&:after {
border-top: 2px solid $primary;
border-bottom: 2px solid $primary;
background: $primary;
content: "";
border-top-right-radius: 6px;
position: absolute;
left: 100%;
bottom: -2px;
width: 24.818px;
height: 52px;
mask: url(http://assets.peteheaney.com.s3.amazonaws.com/button-corner-right.svg) top left / cover;
}
}
&--primary {
color: #000;
background-color: $primary;
border-color: $primary;
&:active,
&:hover,
&:focus {
background-color: darken($primary, 2%);
border-color: darken($primary, 2%);
}
}
}
If you don't mind leaving the corner clickable, you could make the button invisible and just use a background image:
button{
width:x;
height:y;
border:none;
background-color:none
background-image:url(button_image.png);
background-position:center;
background-size:x y;
background-repeat:no-repeat;
}
With button_image.png being the image of your button style without text.
You can try to draw it like this using before and after :
.button {
position: relative;
display: inline-block;
background-color: orange;
color: white;
padding: 20px 40px;
font-size: 14px;
border-radius: 5px;
text-decoration: none;
}
.button:after {
content: '';
position: absolute;
z-index: 10;
display: block;
bottom: -6px;
right: -2px;
width: 10px;
height: 20px;
transform: rotate(45deg);
background-color: white;
}
.button:before {
content: '';
position: absolute;
z-index: 100;
display: block;
bottom: -1px;
right: 4px;
width: 13px;
height: 23px;
transform: rotate(45deg);
background-color: orange;
border-radius: 10px;
}
Button
Here is an example of how this could possibly be achieved with pure CSS.
However an image or an SVG might be a more efficient way to solve this issue.
.Large{
position:relative;
display:inline-block;
background:#FFB300;
border:none;
padding:20px 0 20px 30px;
border-radius:10px 0 0 10px;
height:40px;
font:700 1.5em/40px Arial;
}
.Large::after{
content:"";
display:block;
position:absolute;
top:0;
right:-30px;
width:30px;
height:50px;
background:#FFB300;
border-radius:0 10px 0 0;
}
.Large::before{
content:"";
display:block;
position:absolute;
bottom:0;
right:-30px;
width:0;
height:0;
border-top: 15px solid #FFB300;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #FFB300;
}
<a class="Large">LARGE</a>
I am not really happy with my result, but here it goes just in case you can make it better.
The different color is just to make it easier to see what is what.
I have focused on solving the transparent one. Once you have it, solving the other is easier.
:root {
--width: 10px;
--width2: 14px;
}
.test {
position: relative;
margin: 20px;
width: 300px;
height: 150px;
position: absolute;
border: var(--width) solid transparent;
border-image: linear-gradient(to bottom right, orange 0%, orange 70%, transparent 70%);
border-image-slice: 1;
}
.test:before {
content: "";
position: absolute;
height: 25px;
width: 150px;
right: 29px;
bottom: -10px;
transform: skewX(-45deg);
border: solid 0px transparent;
border-bottom-color: red;
border-bottom-width: var(--width);
border-right-color: red;
border-right-width: var(--width2);
border-bottom-right-radius: 25px;
}
.test:after {
content: "";
position: absolute;
height: 50px;
width: 25px;
right: -10px;
bottom: 29px;
transform: skewY(-45deg);
border: solid 0px transparent;
border-bottom-color: red;
border-bottom-width: var(--width2);
border-right-color: red;
border-right-width: var(--width);
border-bottom-right-radius: 25px;
}
<div class="test"></div>
I decided to go for the approach I have demonstrated in this pen - https://codepen.io/peteheaney/pen/bRBOMq (compiled CSS version below)
*, *::after, *::before {
font-family: sans-serif;
box-sizing: border-box;
}
.button {
background-image: none;
border-style: solid;
border-top-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-right-width: 0;
border-color: transparent;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-bottom: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
touch-action: manipulation;
vertical-align: middle;
white-space: normal;
transition: all 0.2s;
}
.button:active, .button:hover, .button:focus {
text-decoration: none;
}
.button--large {
font-size: 15px;
padding: 16px 0 14px 21px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
position: relative;
margin-right: 21px;
}
.button--large:before {
content: "";
position: absolute;
left: 100%;
top: -2px;
width: 21px;
height: calc(100% - 17px);
border-top-right-radius: 6px;
}
.button--large:after {
position: absolute;
left: 100%;
bottom: -2px;
width: 21px;
height: 21px;
transition: all 0.2s;
}
.button--primary {
color: #000;
background-color: #FAB500;
border-color: #FAB500;
}
.button--primary:before {
background-color: #FAB500;
transition: all 0.2s;
}
.button--primary:active:before, .button--primary:hover:before, .button--primary:focus:before {
background-color: #f0ae00;
border-color: #f0ae00;
}
.button--primary:after {
content: url(http://assets.peteheaney.com.s3.amazonaws.com/button-corner-primary-large.svg);
}
.button--primary:active, .button--primary:hover, .button--primary:focus {
background-color: #f0ae00;
border-color: #f0ae00;
}
.button--secondary {
color: #000;
border-color: #FAB500;
}
.button--secondary:before {
border: 2px solid #FAB500;
border-bottom: 0;
border-left: 0;
transition: all 0.2s;
}
.button--secondary:active:before, .button--secondary:hover:before, .button--secondary:focus:before {
background-color: #FAB500;
}
.button--secondary:after {
content: url(http://assets.peteheaney.com.s3.amazonaws.com/button-corner-secondary-large.svg);
}
.button--secondary:active, .button--secondary:hover, .button--secondary:focus {
background-color: #FAB500;
border-color: #FAB500;
}
<a class="button button--large button--primary" href="">My button</a>
<a class="button button--large button--secondary" href="">My other button</a>
Firstly, I divided the right-hand portion into top and bottom (using :before and :after). The top-right pseudo element just has a background color and a top right border radius. This way the top-right portion can have a flexible height, meaning the buttons don't need to have a fixed height. The bottom right pseudo element is essentially an SVG ( using content: url(/path/to/svg.svg) ). This pseudo element always has a fixed width and height, so it maintains its size and aspect ratio regardless of the width/height of the button.
The outline style button is just a variation on the other style, with more borders and less backgrounds.
The only downside to this approach is the need for a different SVG for each button style. But I'm happy with that compromise.
Another take on Arthur's approach.
If you create the bottom right image (the white corner and the yellow corner border) you are able to position this so it stays to the bottom right and you have the rest of the button to style yourself.
button {
background-image:url(corner.svg);
height: 20px;
padding: 5px;
border-radius: 5px;
background-color: yellow;
background-repeat: no-repeat;
background-position: bottom right;
}
I am trying to make a custom element on a wordpress website. It is one of those downward pointing triangles leading into the next page section, but it also has a number on top of it.
My problem is that the way I have it now, the number becomes hidden behind the background of the section above, and I can't get the number/text to remain ontop, which is exacerbated when seen via mobile. changing the z-index didn't help.
This is the css I am using:
/**to create triangle in middle of page **/
div.arrow-down-tan {
width: 0;
height: 0;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-top: 35px solid #f6f6f6;
position: relative;
left: 50%;
margin-left: -55px;
margin-top: -3%;
padding: 0;
z-index: 2;
}
/**to create text ontop of triangle **/
div.arrow-text {
position: absolute;
left: 50%;
margin-left: -1.25%;
top: -8%;
color: grey;
font-size: 20px;
z-index: 10;
}
And the html I am using (raw html within a wordpress visual composer page section - which may be part of the problem as well since it is the preceding page section's background which is covering the number):
<div class="arrow-down-tan"></div>
<div class="arrow-text">3</div>
Any help would be greatly appreciated. Many thanks!
Not sure if this will work perfectly in mobile..
https://jsfiddle.net/Hastig/n2w9pv08/
css
.d-arrow {
position: absolute;
left: 46%;
width: 0px;
height: 0px;
border-style: solid;
border-width: 40px 30px 0px 30px;
border-color: #CCCCCC transparent transparent transparent;
/* background-color: red; */
}
.d-arrow-text {
position: relative;
margin: -35px 0px 0px -7px;
padding: 0px 0px 0px 0px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size: 20px;
line-height: 20px;
color: #000000;
text-shadow: none;
}
html
<div class="d-arrow">
<div class="d-arrow-text">3</div>
</div>
div.arrow-down-tan {
position: relative;
margin-left: -55px;
margin-top: 0;
padding: 0;
z-index: 2;
}
div.arrow-down-tan:after {
width: 0;
height: 0;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-top: 35px solid red;
position: absolute;
left: 50%;
margin-left: -55px;
margin-top: 0;
padding: 0;
z-index: 2;
content:"";
}
/**to create text ontop of triangle **/
div.arrow-text {
position: absolute;
left: 49.5%;
top: 0;
color: white;
font-size: 20px;
z-index: 10;
}
<div class="arrow-down-tan"><div class="arrow-text">3</div></div>