CSS for border in corners only [closed]

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.)

Answer 1

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>