CSS로 그라디언트 테두리 버튼 디자인하기

안녕하세요 찐망고입니다.

요즘 버튼모양 테두리에도 그라디언트가 들어가는 디자인을 보게 되는데요.

쉽게 테두리에 그라디언트를 적용해 보겠습니다.

 

코오롱이앤씨 버튼부분

hover 후

 

 

그라디언트는 원래 image의 영역이에요.

그래서 본디 배경색에 그라디언트를 넣는 경우에도 background-image로 적용했거든요.

 

See the Pen Untitled by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

a요소의 테두리만 그라디언트로 보이기 위해

a요소 자체에 배경이미지로 그라디언트를 넣고,

span요소에도 배경색을 넣고 width와 height를 2px씩 줄여서 

테두리처럼 보이게 만드는 방법이 있습니다 ㅎㅎ

 

 

물론 지금은 border자체에 border-image가 적용 가능 하므로

 

See the Pen Untitled by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

 

그라디언트가 들어가는 게 보이죠?

border-image-slice는 border이미지가 어떻게 잘려서 표시될지를 지정합니다.

주로 이미지를 테두리로 사용할 때 유용한 css죠

.more {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 148px;
    height: 40px;
    margin: 0 auto;
    font-size: 16px;
    
    /* border 그라디언트 */
    border-image-source: linear-gradient(to right, #45a5e6 0%,#165293 84%);
    border-image-width: 1px;
    border-image-slice: 1;
}

 

값은 숫자나 백분율로 지정할 수 있습니다. 

숫자의 경우 1이라고 한다면 가장자리 1픽셀만큼 잘려서 테두리로 사용합니다 

만약 숫자가 4개로 지정되면 각각 왼쪽, 오른쪽, 위, 아래방향의 잘림 값이 됩니다.

 

 

border-image-width대신에 border로 대체 가능합니다. (같이 사용 불가)

속성 순서를 맞춰주세요.

.gradient {
    border: 1px solid transparent; 
    border-image-source: linear-gradient(to right, #45a5e6 0%,#165293 84%);
    border-image-slice: 1;
}

 

border-image-slice의 기본값은 100%입니다. 

.gradient {
    border-image-source: linear-gradient(to right, #45a5e6 0%,#165293 84%);
    border-image-slice: 100%;
    border-image-width: 50px;
}

 

border-image-slice가 width값만큼 모서리에 들어가고

border-image-slice의 백분율 값에 따라 그라디언트 점진적인 변화가 눈에 보이나요?

 

border-image-slice: 100% -> 50%

 

border-image-slice:  49% -> 1%

 

 

 

 

 

 

 

 

참고로 gradient border mask를 활용하여 border-radius와 그라디언트를 같이 넣는 방법입니다.

 

See the Pen gradient3 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

 

 

 

출처

코오롱E&C