Blogger 및 사이트에서 애니메이션 소프트 UI 버튼 모음

해당 게시물의 튜토리얼은 블로그에 애니메이션 소프트 UI 버튼을 추가하는 방법입니다. 이 버튼은 매우 매력적이고 웹사이트에 역동적인 느낌을 줍니다. 시작하기 전에 이러한 소프트 UI 버튼과 그 장점에 대해 알아보세요.

소프트 UI(뉴모피즘)란?

소프트 UI 디자인은 디자인 요소의 하이라이트와 그림자를 포함하여 마치 페이지 위에 레이어링 된 것처럼 보이게 합니다. 소프트 UI는 요소가 가라앉고 배경에서 강제로 튀어나와 다양한 레벨을 만드는 Glassy Frost 스타일 또는 Glassy Blur 스타일을 만듭니다. 이러한 효과를 보다 부드럽고 파스텔 색상 팔레트와 결합하면 결과적으로 어두운 부분이 깊고 전반적인 효과가 변경되는 가볍고 부드러운 인터페이스가 생성됩니다.

뉴모피즘 디자인은 실제 요소와 디지털 요소 간의 대비나 유사점에 더 중점을 두지 않습니다. 대신에 사용자에게 보다 원활한 경험을 제공하는 '소프트 UI'에 중점을 둡니다. 뉴모피즘 디자인을 사용하면 버튼과 카드가 실제로 배치된 배경의 일부라는 느낌을 받게 됩니다. 이러한 뉴모피즘(Neumorphism) 추세는 일반적인 인터페이스의 매력적인 측면을 제거하고 디자인 전반에 걸쳐 일관성을 유지하고 사용자 간섭을 깔끔하게 만드는 부드러운 스타일에 중점을 둡니다.

소프트 UI는 기본적으로 인터페이스의 날카로운 모서리를 제거하고 모서리를 소프트로 만들어 부드러운 외관과 상징적인 디자인을 구현합니다.

애니메이션 소프트 UI 버튼의 장점

다음과 같이 소프트 UI 버튼의 장점을 확인할 수 있습니다.

깨끗하고 최적화된 모습
전체적으로 부드러운 외관
소프트 UI 디자인
기존 버튼을 새로운 스타일로 변경하세요.
버튼 위에 마우스를 올려놓는 동안 3D 느낌을 추가합니다.

애니메이션 소프트 UI 버튼을 추가하는 방법

다음과 같이 소프트 UI 버튼의 코드를 추가할 수 있습니다.

Blogger 대시보드에 로그인하고 테마로 이동합니다.
이제 '사용자 정의' 옆에 있는 드롭다운 메뉴에서 화살표를 클릭합니다.
'HTML 편집'을 선택합니다.
이제 ]]></b:skin> 검색하여 바로 위에 다음 CSS를 붙여 넣습니다.

button{margin:20px}
.custom-btn{width:130px;height:40px;color:#fff;border-radius:50px;padding:10px 25px;font-family:'Lato',sans-serif;font-weight:500;font-size:16px;background:transparent;cursor:pointer;transition:all 0.3s ease;position:relative;display:inline-block;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),inset -7px -7px 10px 0 rgba(0,0,0,.1),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);text-shadow:2px 2px 3px rgba(255,255,255,.5),-4px -4px 6px rgba(116,125,136,.2);outline:none}

/* 1 */
.btn-1{color:rgba(0,3,255,.5);background-color:#b2d8ff;border:none}
.btn-1:hover{color:rgba(0,3,255,.7);background:linear-gradient(0deg,rgba(0,3,255,.5) 0%,rgba(2,126,251,.5) 100%)}
  
/* 2 */
.btn-2{background-color:#e8d1ff;color:rgba(96,9,240,.5);border:none}
.btn-2:before{height:0%;width:2px}
.btn-2:hover{box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.5),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.2)}

/* 3 */
.btn-3{color:rgba(2,126,251,1);background:rgba(118,174,241,1);width:130px;height:40px;line-height:42px;padding:0;border:none}
.btn-3 span{position:relative;display:block;width:100%;height:100%}
.btn-3:before,.btn-3:after{position:absolute;content:"";right:0;top:0;background:rgba(2,126,251,1);transition:all 0.3s ease}
.btn-3:before{height:0%;width:2px}
.btn-3:after{width:0%;height:2px}
.btn-3:hover{background:transparent;box-shadow:none}
.btn-3:hover:before{height:100%}
.btn-3:hover:after{width:100%}
.btn-3 span:hover{color:rgba(2,126,251,1)}
.btn-3 span:before,.btn-3 span:after{position:absolute;content:"";left:0;bottom:0;background:rgba(2,126,251,1);transition:all 0.3s ease}
.btn-3 span:before{width:2px;height:0%}
.btn-3 span:after{width:0%;height:2px}
.btn-3 span:hover:before{height:100%}
.btn-3 span:hover:after{width:100%}

/* 4 */
.btn-4{color:#03c8a8;background:#96e4df;line-height:42px;padding:0;border:none}
.btn-4:hover{background-color:#89d8d3}
  
/* 5 */
.btn-5{border:none;color:#ff84c1;background-color:#ffc1e0}
.btn-5:hover{color:#f0094a;background:transparent;box-shadow:none}
.btn-5:before,.btn-5:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;background:#f0094a;box-shadow:-1px -1px 5px 0 #fff,7px 7px 20px 0 #0003,4px 4px 5px 0 #0002;transition:400ms ease all}
.btn-5:after{right:inherit;top:inherit;left:0;bottom:0}
.btn-5:hover:before,.btn-5:hover:after{width:100%;transition:800ms ease all}
  
/* 6 */
.btn-6{color:rgba(234,76,137,1);background:rgb(247,150,192);line-height:42px;padding:0;border:none}
.btn-6 span{position:relative;display:block;width:100%;height:100%}
.btn-6:before,.btn-6:after{position:absolute;content:"";height:0%;width:1px;box-shadow:-1px -1px 20px 0 rgba(255,255,255,1),-4px -4px 5px 0 rgba(255,255,255,1),7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)}
.btn-6:before{right:0;top:0;transition:all 500ms ease}
.btn-6:after{left:0;bottom:0;transition:all 500ms ease}
.btn-6:hover{background:transparent;color:#76aef1;box-shadow:none}
.btn-6:hover:before{transition:all 500ms ease;height:100%}
.btn-6:hover:after{transition:all 500ms ease;height:100%}
.btn-6 span:before,.btn-6 span:after{position:absolute;content:"";box-shadow:-1px -1px 20px 0 rgba(255,255,255,1),-4px -4px 5px 0 rgba(255,255,255,1),7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)}
.btn-6 span:before{left:0;top:0;width:0%;height:.5px;transition:all 500ms ease}
.btn-6 span:after{right:0;bottom:0;width:0%;height:.5px;transition:all 500ms ease}
.btn-6 span:hover:before{width:100%}
.btn-6 span:hover:after{width:100%}
  
/* 7 */
.btn-7{background:#ffbf7f;line-height:42px;color:darkorange;padding:0;border:none}
.btn-7 span{position:relative;display:block;width:100%;height:100%}
.btn-7:before,.btn-7:after{position:absolute;content:"";right:0;bottom:0;background:rgba(251,75,2,1);box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all 0.3s ease}
.btn-7:before{height:0%;width:2px}
.btn-7:after{width:0%;height:2px}
.btn-7:hover{color:rgba(251,75,2,1);background:transparent}
.btn-7:hover:before{height:100%}
.btn-7:hover:after{width:100%}
.btn-7 span:before,.btn-7 span:after{position:absolute;content:"";left:0;top:0;background:rgba(251,75,2,1);box-shadow:-7px -7px 20px 0 rgba(255,255,255,.9),-4px -4px 5px 0 rgba(255,255,255,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all 0.3s ease}
.btn-7 span:before{width:2px;height:0%}
.btn-7 span:after{height:2px;width:0%}
.btn-7 span:hover:before{height:100%}
.btn-7 span:hover:after{width:100%}
  
/* 8 */
.btn-8{background-color:#d9d0f5;color:#c797eb;line-height:42px;padding:0;border:none}
.btn-8 span{position:relative;display:block;width:100%;height:100%}
.btn-8:before,.btn-8:after{position:absolute;content:"";right:0;bottom:0;background:#c797eb;transition:all 0.3s ease}
.btn-8:before{height:0%;width:2px}
.btn-8:after{width:0%;height:2px}
.btn-8:hover:before{height:100%}
.btn-8:hover:after{width:100%}
.btn-8:hover{background:transparent}
.btn-8 span:hover{color:#c797eb}
.btn-8 span:before,.btn-8 span:after{position:absolute;content:"";left:0;top:0;background:#c797eb;transition:all 0.3s ease}
.btn-8 span:before{width:2px;height:0%}
.btn-8 span:after{height:2px;width:0%}
.btn-8 span:hover:before{height:100%}
.btn-8 span:hover:after{width:100%}
  
/* 9 */
.btn-9{border:none;transition:all 0.3s ease;overflow:hidden;color:#1fd1f9;color:#0cbcff}
.btn-9:after{position:absolute;content:" ";z-index:-1;top:0;left:0;width:100%;height:100%;background:#5fe0fd;transition:all 0.3s ease}
.btn-9:hover{background:transparent;box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3);color:#fff}
.btn-9:hover:after{-webkit-transform:scale(2) rotate(180deg);transform:scale(2) rotate(180deg);box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3)}
  
/* 10 */
.btn-10{background:lightblue;color:#60abf7;border:none;transition:all 0.3s ease;overflow:hidden}
.btn-10:after{position:absolute;content:" ";top:0;left:0;z-index:-1;width:100%;height:100%;transition:all 0.3s ease;-webkit-transform:scale(.1);transform:scale(.1)}
.btn-10:hover{color:#fff;border:none;background:transparent}
.btn-10:hover:after{background:#7fbfff;-webkit-transform:scale(1);transform:scale(1)}
  
/* 11 */
.btn-11{border:none;background:rgb(251,33,117);background:linear-gradient(0deg,rgba(251,33,117,1) 0%,rgba(234,76,137,1) 100%);background:#f7d0f5;color:rgba(251,33,117,.5);overflow:hidden}
.btn-11:hover{text-decoration:none;color:#fff}
.btn-11:before{position:absolute;content:'';display:inline-block;top:-180px;left:0;width:30px;height:100%;background-color:#fff;animation:shiny-btn1 3s ease-in-out infinite}
.btn-11:hover{opacity:.7}
.btn-11:active{box-shadow:4px 4px 6px 0 rgba(255,255,255,.3),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.2)}
@-webkit-keyframes shiny-btn1{0%{-webkit-transform:scale(0) rotate(45deg);opacity:0}80%{-webkit-transform:scale(0) rotate(45deg);opacity:0.5}81%{-webkit-transform:scale(4) rotate(45deg);opacity:1}100%{-webkit-transform:scale(50) rotate(45deg);opacity:0}}
  
/* 12 */
.btn-12{position:relative;right:20px;bottom:20px;border:none;box-shadow:none;width:130px;height:40px;line-height:42px;-webkit-perspective:230px;perspective:230px}
.btn-12 span{background:#7fbfff;color:#3b97f3;display:block;position:absolute;width:130px;height:40px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);border-radius:50px;margin:0;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .3s;transition:all .3s}
.btn-12 span:nth-child(1){box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}
.btn-12 span:nth-child(2){-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}
.btn-12:hover span:nth-child(1){box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}
.btn-12:hover span:nth-child(2){background:transparent;color:transparent;box-shadow:none;text-shadow:none;-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);transform:rotateX(-90deg)}
  
/* 13 */
.btn-13{color:lightseagreen;background-color:#89d8d3;border:none;z-index:1}
.btn-13:after{position:absolute;content:"";width:100%;height:0;bottom:0;left:0;z-index:-1;border-radius:50px;background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6 0%,#96e4df 74%);box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),inset -7px -7px 10px 0 rgba(0,0,0,.1),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);text-shadow:0 0 6px rgba(255,255,255,.3),-4px -4px 6px rgba(116,125,136,.2);transition:all 0.3s ease}
.btn-13:hover{}
.btn-13:hover:after{top:0;height:100%}
.btn-13:active{top:2px}
  
/* 14 */
.btn-14{background:#ffff9e;color:#ffb64d;border:none;z-index:1}
.btn-14:after{position:absolute;content:"";width:100%;height:0;top:0;left:0;z-index:-1;border-radius:50px;background-color:#ffff8a;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),inset -7px -7px 10px 0 rgba(0,0,0,.1),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);text-shadow:0 0 6px rgba(255,255,255,.3),-4px -4px 6px rgba(116,125,136,.2);transition:all 0.3s ease}
.btn-14:hover{color:#ffb64d}
.btn-14:hover:after{top:auto;bottom:0;height:100%}
.btn-14:active{top:2px}
  
/* 15 */
.btn-15{background:#c68eff;color:#a453f5;border:none;z-index:1}
.btn-15:after{position:absolute;content:"";width:0;height:100%;top:0;right:0;z-index:-1;background-color:#7f7fff;border-radius:50px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all 0.3s ease}
.btn-15:hover{color:#4c4cf1}
.btn-15:hover:after{left:0;width:100%}
.btn-15:active{top:2px}
  
/* 16 */
.btn-16{border:none;color:#aaa}
.btn-16:after{position:absolute;content:"";width:0;height:100%;top:0;left:0;direction:rtl;z-index:-1;border-radius:50px;box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;transition:all 0.3s ease}
.btn-16:hover{color:#bbb}
.btn-16:hover:after{left:auto;right:0;width:100%}
.btn-16:active{top:2px}

이제 특정 게시물이나 페이지에 아래 버튼 코드를 추가합니다.

데모

다음은 코드에 표시된 번호의 데모입니다. # 부분을 원하는 링크로 교체합니다.

<button class="custom-btn btn-1" onclick="window.open('#')">버튼1</button>

<button class="custom-btn btn-2" onclick="window.open('#')">버튼2</button>

<button class="custom-btn btn-3" onclick="window.open('#')">버튼3</button>

<button class="custom-btn btn-4" onclick="window.open('#')">버튼4</button>

<button class="custom-btn btn-5" onclick="window.open('#')">버튼5</button>

<button class="custom-btn btn-6" onclick="window.open('#')">버튼6</button>

<button class="custom-btn btn-7" onclick="window.open('#')">버튼7</button>

<button class="custom-btn btn-8" onclick="window.open('#')">버튼8</button>

<button class="custom-btn btn-9" onclick="window.open('#')">버튼9</button>

<button class="custom-btn btn-10" onclick="window.open('#')">버튼10</button>

<button class="custom-btn btn-11" onclick="window.open('#')">버튼11</button>

<button class="custom-btn btn-12" onclick="window.open('#')">버튼12</button>

<button class="custom-btn btn-13" onclick="window.open('#')">버튼13</button>

<button class="custom-btn btn-14" onclick="window.open('#')">버튼14</button>

<button class="custom-btn btn-15" onclick="window.open('#')">버튼15</button>

<button class="custom-btn btn-16" onclick="window.open('#')">버튼16</button>

결론

해당 게시물에서는 블로그나 사이트에 애니메이션 소프트 UI 버튼을 추가하는 방법에 대한 단계별 튜토리얼을 만들었습니다. 버튼 위에 마우스를 올리면 매우 부드럽고 3D 느낌이 납니다. 본문의 소프트 UI 버튼 스타일이 마음에 드셨기를 바랍니다.

PICK

Blogger 및 사이트에서 애니메이션 소프트 UI 버튼 모음

소프트 UI(뉴모피즘)란?

애니메이션 소프트 UI 버튼의 장점

애니메이션 소프트 UI 버튼을 추가하는 방법

데모

결론

댓글 쓰기

Blogger 사이트에서 오른쪽 클릭, 복사, 잘라내기 및 F12를 차단하는 방법

Blogger 모달(Modal) OnClick 팝업 버튼 코드

Blogger 게시물 URL에서 날짜를 제거하는 방법

블로거(blogger) 사이트에서 별점 평가 위젯을 만드는 방법