블로그에 생동감을 주는 CSS 버튼을 달아보자!

블로그에 생동감을 주는 CSS 버튼을 달아보자!

다양한 정보를 전달해 드리려고 노력하는 블로그!!!

글과 사진 및 이미지 ▶ CopyLeft(C)
◎CopyLeft(C) 는 공유는 하시되 복사 붙여넣기가 아니라 내용을 응용하여 작성해서 가져가셔야 된다는 걸 알려 드립니다.
◎사진과 이미지 일부는 퍼온 것도 있음을 밝힙니다.

---

• 블로그에 생동감을 주는 CSS 버튼을 달아보자!
  • 티스토리 블로그에 css 버튼을 달아보자.
  • 다양한 CSS 버튼

---

이번에 소개해 드릴 내용은 CSS 버튼을 티스토리 블로그에 한번 적용해 보려고 합니다.
티스토리 블로그를 처음 시작하면서 언급을 했지만, 필자는 마크다운으로 글을 작성하여 에버노트로 불러와서 글을 올립니다.
그래서 링크 부분이 조금 아쉽게 느껴졌습니다. 다른 블로그들을 보면 링크버튼이 정말 비교되더군요.

그래서 쉽게 사용할 수 있는 버튼을 찾아보게 되다 알게 되어 공유도 할 겸 필자도 까먹지 않도록 저장하려고 글을 작성해봅니다.

마크다운에서 HTML이 다 적용이 안 돼서 중간에 티스토리에서 작업을 하였다.

---

티스토리 블로그에 css 버튼을 달아보자.

1. css 소스는 관리자 ▶ HTML/CSS ▶ CSS 맨 아래에 아래의 소스를 입력하고 저장한다.

/*버튼 꾸미기*/
html,body{
  height:100%;
}
body{
  text-align:center;
}
body:before{
  content:'';
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
button{
  background:#1AAB8A;
  color:#fff;
  border:none;
  position:relative;
  height:60px;
  font-size:1.6em;
  padding:0 2em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
}
button:hover{
  background:#fff;
  color:#1AAB8A;
}
button:before,button:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #1AAB8A;
  transition:400ms ease all;
}
button:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
button:hover:before,button:hover:after{
  width:100%;
  transition:800ms ease all;
}

/*버튼 꾸미기*/

2. 글쓰기에서 아래처럼 예제 버튼을 만들어 본다.

<button>Hover me !</button>

필자의 경우 링크를 걸려고 만든 것이기 때문에 링크가 걸려있는 버튼은 아래처럼 작성 하면 된다.

<a href="http://링크주소" target="_blank" class="tx-link"><button>링크사이트 바로가기</button></a>

위의 HTML처럼 작성한다면 미리 보기로 보았을시 링크 페이지를 새창으로 불러온다.

그럼 아래와 같이 보여지게 된다.

---

다양한 CSS 버튼

그 밖에도 다양한 CSS 버튼이 있다.
HTML을 알고 있다면 다양하게 적용할 수 있을 것 같다.

오늘 소개해 드린 소스는 ‘코드펜’이라고 무료 소스도 많이 나와 있는 사이트이다. 한 번쯤 가서 구경하면 좋을 곳이라고 생각된다.

%23%20%uBE14%uB85C%uADF8%uC5D0%20%uC0DD%uB3D9%uAC10%uC744%20%uC8FC%uB294%20CSS%20%uBC84%uD2BC%uC744%20%uB2EC%uC544%uBCF4%uC790%21%20%0A@%28%24.%uBE14%uB85C%uADF8%20%uC791%uC131%uC911%29%5BMarxico%2C%20%uD2F0%uC2A4%uD1A0%uB9AC%5D%20%0A%0A%3Cp%3E%3Cfont%20color%3D%22%23ffffff%22%3E%3Cspan%20style%3D%22background-color%3A%20rgb%280%2C%20153%2C%20153%29%3B%20color%3A%20rgb%28255%2C%20255%2C%20255%29%3B%22%3E%uB2E4%uC591%uD55C%20%uC815%uBCF4%uB97C%20%uC804%uB2EC%uD574%20%uB4DC%uB9AC%uB824%uACE0%20%uB178%uB825%uD558%uB294%20%uBE14%uB85C%uADF8%21%21%21%3C/span%3E%3C/font%3E%3C/p%3E%0A%uAE00%uACFC%20%uC0AC%uC9C4%20%uBC0F%20%uC774%uBBF8%uC9C0%20%u25B6%20CopyLeft%28C%29%0A%u25CECopyLeft%28C%29%20%uB294%20%uACF5%uC720%uB294%20%uD558%uC2DC%uB418%20%uBCF5%uC0AC%20%uBD99%uC5EC%uB123%uAE30%uAC00%20%uC544%uB2C8%uB77C%20%uB0B4%uC6A9%uC744%20%uC751%uC6A9%uD558%uC5EC%20%uC791%uC131%uD574%uC11C%20%uAC00%uC838%uAC00%uC154%uC57C%20%uB41C%uB2E4%uB294%20%uAC78%20%uC54C%uB824%20%uB4DC%uB9BD%uB2C8%uB2E4.%20%0A%u25CE%uC0AC%uC9C4%uACFC%20%uC774%uBBF8%uC9C0%20%uC77C%uBD80%uB294%20%uD37C%uC628%20%uAC83%uB3C4%20%uC788%uC74C%uC744%20%uBC1D%uD799%uB2C8%uB2E4.%20%0A%0A%0A----------%0A%0A%5BTOC%5D%0A%0A%0A----------%0A%0A%uC774%uBC88%uC5D0%20%uC18C%uAC1C%uD574%20%uB4DC%uB9B4%20%uB0B4%uC6A9%uC740%20CSS%20%uBC84%uD2BC%uC744%20%uD2F0%uC2A4%uD1A0%uB9AC%20%uBE14%uB85C%uADF8%uC5D0%20%uD55C%uBC88%20%uC801%uC6A9%uD574%20%uBCF4%uB824%uACE0%20%uD569%uB2C8%uB2E4.%20%0A%uD2F0%uC2A4%uD1A0%uB9AC%20%uBE14%uB85C%uADF8%uB97C%20%uCC98%uC74C%20%uC2DC%uC791%uD558%uBA74%uC11C%20%uC5B8%uAE09%uC744%20%uD588%uC9C0%uB9CC%2C%20%uD544%uC790%uB294%20%uB9C8%uD06C%uB2E4%uC6B4%uC73C%uB85C%20%uAE00%uC744%20%uC791%uC131%uD558%uC5EC%20%uC5D0%uBC84%uB178%uD2B8%uB85C%20%uBD88%uB7EC%uC640%uC11C%20%uAE00%uC744%20%uC62C%uB9BD%uB2C8%uB2E4.%20%0A%uADF8%uB798%uC11C%20%uB9C1%uD06C%20%uBD80%uBD84%uC774%20%uC870%uAE08%20%uC544%uC27D%uAC8C%20%uB290%uAEF4%uC84C%uC2B5%uB2C8%uB2E4.%20%uB2E4%uB978%20%uBE14%uB85C%uADF8%uB4E4%uC744%20%uBCF4%uBA74%20%uB9C1%uD06C%uBC84%uD2BC%uC774%20%uC815%uB9D0%20%uBE44%uAD50%uB418%uB354%uAD70%uC694.%20%0A%0A%uADF8%uB798%uC11C%20%uC27D%uAC8C%20%uC0AC%uC6A9%uD560%20%uC218%20%uC788%uB294%20%uBC84%uD2BC%uC744%20%uCC3E%uC544%uBCF4%uAC8C%20%uB418%uB2E4%20%uC54C%uAC8C%20%uB418%uC5B4%20%uACF5%uC720%uB3C4%20%uD560%20%uACB8%20%uD544%uC790%uB3C4%20%uAE4C%uBA39%uC9C0%20%uC54A%uB3C4%uB85D%20%uC800%uC7A5%uD558%uB824%uACE0%20%uAE00%uC744%20%uC791%uC131%uD574%uBD05%uB2C8%uB2E4.%0A%0A%3E%20%uB9C8%uD06C%uB2E4%uC6B4%uC5D0%uC11C%20HTML%uC774%20%uB2E4%20%uC801%uC6A9%uC774%20%uC548%20%uB3FC%uC11C%20%uC911%uAC04%uC5D0%20%uD2F0%uC2A4%uD1A0%uB9AC%uC5D0%uC11C%20%uC791%uC5C5%uC744%20%uD558%uC600%uB2E4.%20%0A%0A%0A----------%0A%0A%0A%23%23%20%uD2F0%uC2A4%uD1A0%uB9AC%20%uBE14%uB85C%uADF8%uC5D0%20css%20%uBC84%uD2BC%uC744%20%uB2EC%uC544%uBCF4%uC790.%0A%0A1.%20css%20%uC18C%uC2A4%uB294%20%uAD00%uB9AC%uC790%20%u25B6%20HTML/CSS%20%u25B6%20CSS%20%uB9E8%20%uC544%uB798%uC5D0%20%uC544%uB798%uC758%20%uC18C%uC2A4%uB97C%20%uC785%uB825%uD558%uACE0%20%uC800%uC7A5%uD55C%uB2E4.%20%0A%0A%0A%60%60%60%0A/*%uBC84%uD2BC%20%uAFB8%uBBF8%uAE30*/%0Ahtml%2Cbody%7B%0A%20%20height%3A100%25%3B%0A%7D%0Abody%7B%0A%20%20text-align%3Acenter%3B%0A%7D%0Abody%3Abefore%7B%0A%20%20content%3A%27%27%3B%0A%20%20height%3A100%25%3B%0A%20%20display%3Ainline-block%3B%0A%20%20vertical-align%3Amiddle%3B%0A%7D%0Abutton%7B%0A%20%20background%3A%231AAB8A%3B%0A%20%20color%3A%23fff%3B%0A%20%20border%3Anone%3B%0A%20%20position%3Arelative%3B%0A%20%20height%3A60px%3B%0A%20%20font-size%3A1.6em%3B%0A%20%20padding%3A0%202em%3B%0A%20%20cursor%3Apointer%3B%0A%20%20transition%3A800ms%20ease%20all%3B%0A%20%20outline%3Anone%3B%0A%7D%0Abutton%3Ahover%7B%0A%20%20background%3A%23fff%3B%0A%20%20color%3A%231AAB8A%3B%0A%7D%0Abutton%3Abefore%2Cbutton%3Aafter%7B%0A%20%20content%3A%27%27%3B%0A%20%20position%3Aabsolute%3B%0A%20%20top%3A0%3B%0A%20%20right%3A0%3B%0A%20%20height%3A2px%3B%0A%20%20width%3A0%3B%0A%20%20background%3A%20%231AAB8A%3B%0A%20%20transition%3A400ms%20ease%20all%3B%0A%7D%0Abutton%3Aafter%7B%0A%20%20right%3Ainherit%3B%0A%20%20top%3Ainherit%3B%0A%20%20left%3A0%3B%0A%20%20bottom%3A0%3B%0A%7D%0Abutton%3Ahover%3Abefore%2Cbutton%3Ahover%3Aafter%7B%0A%20%20width%3A100%25%3B%0A%20%20transition%3A800ms%20ease%20all%3B%0A%7D%0A%0A/*%uBC84%uD2BC%20%uAFB8%uBBF8%uAE30*/%0A%60%60%60%0A%0A2.%20%uAE00%uC4F0%uAE30%uC5D0%uC11C%20%uC544%uB798%uCC98%uB7FC%20%uC608%uC81C%20%uBC84%uD2BC%uC744%20%uB9CC%uB4E4%uC5B4%20%uBCF8%uB2E4.%0A%0A%60%60%60%0A%3Cbutton%3EHover%20me%20%21%3C/button%3E%0A%60%60%60%0A%20%uD544%uC790%uC758%20%uACBD%uC6B0%20%uB9C1%uD06C%uB97C%20%uAC78%uB824%uACE0%20%uB9CC%uB4E0%20%uAC83%uC774%uAE30%20%uB54C%uBB38%uC5D0%20%uB9C1%uD06C%uAC00%20%uAC78%uB824%uC788%uB294%20%uBC84%uD2BC%uC740%20%uC544%uB798%uCC98%uB7FC%20%uC791%uC131%20%uD558%uBA74%20%uB41C%uB2E4.%20%0A%0A%60%60%60%0A%3Ca%20href%3D%22http%3A//%uB9C1%uD06C%uC8FC%uC18C%22%20target%3D%22_blank%22%20class%3D%22tx-link%22%3E%3Cbutton%3E%uB9C1%uD06C%uC0AC%uC774%uD2B8%20%uBC14%uB85C%uAC00%uAE30%3C/button%3E%3C/a%3E%uFEFF%0A%60%60%60%0A%uC704%uC758%20HTML%uCC98%uB7FC%20%uC791%uC131%uD55C%uB2E4%uBA74%20%uBBF8%uB9AC%20%uBCF4%uAE30%uB85C%20%uBCF4%uC558%uC744%uC2DC%20%uB9C1%uD06C%20%uD398%uC774%uC9C0%uB97C%20%uC0C8%uCC3D%uC73C%uB85C%20%uBD88%uB7EC%uC628%uB2E4.%0A%0A%uADF8%uB7FC%20%uC544%uB798%uC640%20%uAC19%uC774%20%uBCF4%uC5EC%uC9C0%uAC8C%20%uB41C%uB2E4.%0A%0A%uC608%uC81C%uBC84%uD2BC%0A%0A%0A----------%0A%0A%0A%23%23%20%uB2E4%uC591%uD55C%20CSS%20%uBC84%uD2BC%0A%0A%uADF8%20%uBC16%uC5D0%uB3C4%20%uB2E4%uC591%uD55C%20CSS%20%uBC84%uD2BC%uC774%20%uC788%uB2E4.%20%0AHTML%uC744%20%uC54C%uACE0%20%uC788%uB2E4%uBA74%20%uB2E4%uC591%uD558%uAC8C%20%uC801%uC6A9%uD560%20%uC218%20%uC788%uC744%20%uAC83%20%uAC19%uB2E4.%20%0A%0A%uC624%uB298%20%uC18C%uAC1C%uD574%20%uB4DC%uB9B0%20%uC18C%uC2A4%uB294%20%27%uCF54%uB4DC%uD39C%27%uC774%uB77C%uACE0%20%uBB34%uB8CC%20%uC18C%uC2A4%uB3C4%20%uB9CE%uC774%20%uB098%uC640%20%uC788%uB294%20%uC0AC%uC774%uD2B8%uC774%uB2E4.%20%uD55C%20%uBC88%uCBE4%20%uAC00%uC11C%20%uAD6C%uACBD%uD558%uBA74%20%uC88B%uC744%20%uACF3%uC774%uB77C%uACE0%20%uC0DD%uAC01%uB41C%uB2E4.%20%0A%0A%uCF54%uB4DC%uD39C%20%uC0AC%uC774%uD2B8%20%uBC14%uB85C%uAC00%uAE30%0A%0A%0A%0A

1. Button with simple effect on hover!

2. the fun button

3. Transitional Buttons

4. 12 fancy buttons