Question 188608 in CSS Question posted in
Some basic documentation can be found here.

Css – How create button with custom colored corners?

I have attached a picture of the button that I need to create; the problem is that I do not know how to make the same angles. I know what needs to be done through pseudo-elements. I tried to shift the corners and use transform:rotate but didn’t get the desired result.

.button::after, .button:before {
  width: 5%;
  height: 5%;
  overflow: hidden;
  border: 1px solid #fff;
  display: block;
  content: "";
  position: absolute;
}

.button::after {
  left: 0;
  bottom: 0;
}

.button:before {
  top: 0;
  right: 0;

}

enter image description here

Tags:

3

Answers


  1. 0

    If you are not looking for the blur effect you can use gradients to achieve this

    button {
  --t: 3px;  /* thickness */
  --s: 15px; /* size */
  --c: #fff; /* color */
  
  padding: 10px 20px;
  margin: 20px;
  font-size: 20px;
  border: none;
  color: #fff;
  background:
    conic-gradient(at left var(--t) bottom var(--t),#0000 25%,var(--c) 0) bottom left,
    conic-gradient(from 180deg at right var(--t) top var(--t),#0000 25%,var(--c) 0) top right;
  background-size: var(--s) var(--s);
  background-repeat: no-repeat;
}


body {
  background: #000;
}
    <button>button</button>

    A related article where I am using such a technique if you want more detail: https://css-tricks.com/fancy-image-decorations-single-element-magic/

    Login or Signup to reply.
  2. 0

    My understanding of the problem is that you want to not only place the corners, but the fade-out as well?

    If that’s the case then I, like Temani, would also use a background-image:

    /* a simple CSS reset to remove all default margin and padding,
   set all elements to inherit font properties from their
   ancestors, and ensure all elements are sized in such a way
   that their assigned size includes the border and padding widths: */
*,
::before,
::after {
  box-sizing: border-box;
  font: inherit;
  margin: 0;
  padding: 0;
}

body {
  background-color: hsl(220deg 95% 10% / 1);
  block-size: 100vh;
  font-family: system-ui;
  font-size: 16px;
  font-weight: 400;
}

main {
  block-size: 100%;
  /* using the following two rules to place the <button>
     element in the center - horizontal and vertical - of
     the <main> element: */
  display: grid;
  place-content: center;
}

button {
  /* using CSS custom properties to define the various
     properties of the borders we're creating,
     first the thickness of the "border": */
  --border-thickness: 0.25em;
  /* the length of the "border" on each of its axes: */
  --border-length: 90%;
  /* the start-color of the "border", which will color the
     corner/start: */
  --border-corner-color: hsl(0deg 100% 100% / 1);
  /* the "size" of the corner part: */
  --border-offset: 0.5em;
  /* the color that will fade out: */
  --border-fadeout-color: hsl(220deg 95% 60% / 1);
  background-color: transparent;
  /* using multiple background-images - using the CSS
     gradient linear-gradient() function: */
  background-image:
    linear-gradient(
      90deg,
      var(--border-corner-color) 0 var(--border-offset),
      var(--border-fadeout-color) var(--border-offset),
      transparent
     ),
     linear-gradient(
       180deg,
       var(--border-corner-color) 0 var(--border-offset),
       var(--border-fadeout-color) var(--border-offset),
       transparent
     ), linear-gradient(
       270deg,
       var(--border-corner-color) 0 var(--border-offset),
       var(--border-fadeout-color) var(--border-offset),
       transparent
     ),
     linear-gradient(
       0deg,
       var(--border-corner-color) 0 var(--border-offset),
       var(--border-fadeout-color) var(--border-offset),
       transparent
     );
  /* defining the various background-positions of each of the
     gradients: */
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-size:
    var(--border-length) var(--border-thickness),
    var(--border-thickness) var(--border-length),
    var(--border-length) var(--border-thickness),
    var(--border-thickness) var(--border-length);
  border-width: 0;
  color: hsl(220deg 95% 90% / 1);
  font-size: 2rem;
  padding-block: 1em;
  padding-inline: 2em;
}
    <main>
  <button>Button text</button>
</main>

    References:

    Login or Signup to reply.
  3. 0 
    button {
  position: relative;
  width: 100px;
  height: 50px;
  border: none;
  background: black;
  color: white;
}

.svg1 {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

button .svg1 rect {
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: red;
  stroke-width: 5px;
  stroke-dasharray: 0 75 50 100 50 50;
}
    <button>Click me
<svg class='svg1'>
<rect />
</svg>
</button>

    If you change the width and height of the button, you will need to adjust the stroke-dasharray

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search