본문 바로가기

블로그 관련

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

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

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

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





이번에 소개해 드릴 내용은 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;
}


/*버튼 꾸미기*/
  1. 글쓰기에서 아래처럼 예제 버튼을 만들어 본다.
<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