<div class="multi-button">
<button>Cut</button>
<button>Copy</button>
<button>Paste</button>
</div>
// hey - change this color here to see changes! It can be hex, RGB, etc!
$main-color: hsl(330, 88%, 67%);
// start
$adjust: 30;
$shadow: 0.75rem;
$d: 150ms;
$br: 1rem;
@function yiq($color) {
$dark: #123;
$light: #DEF;
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r*299) + ($g*587) + ($b*114))/1000;
@if ($yiq >= 128) {
@return $dark;
}
@else {
@return $light;
}
}
@mixin btn-color($color: $main-color, $adj: $adjust) {
background-color: $color;
background-image: radial-gradient(
ellipse at top right,
adjust-color($color, $hue: $adj),
rgba($color, 0) 67%
);
box-shadow: 0 $shadow 0 darken($color, 25%);
color: yiq($color);
text-shadow: 0 -0.1em 0 rgba(yiq(yiq($color)), 0.5);
}
@mixin btn($color: $main-color, $adj: $adjust) {
@include btn-color($color, $adj);
$focus: adjust-color($color, $hue: $adj*3);
&:hover,
&:focus {
outline: none;
@include btn-color($focus);
}
&:active {
box-shadow: 0 0 0;
opacity: 0.67;
outline: none;
top: $shadow;
}
}
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
//
background-color: #345;
}
.multi-button {
display: flex;
position: relative;
border-radius: $br;
box-shadow: 0 2rem 1rem -1rem #123;
}
button {
appearance: none;
border: 0;
font: 2rem/1 monospace;
margin: 0;
overflow: hidden;
padding: 1rem 1.25rem;
position: relative;
top: 0;
transition: $d;
@include btn;
&:first-child,
&:last-child {
border-radius: $br;
}
&:first-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:nth-child(2) {
$c: adjust-color($main-color, $hue: $adjust);
@include btn($c);
}
&:last-child {
$c: adjust-color($main-color, $hue: $adjust*2);
border-bottom-left-radius: 0;
border-top-left-radius: 0;
@include btn($c);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.