본문 바로가기
IT

CSS버튼 네이버블로그, 구글블로그 적용안되는데 티스토리는?

by 바다기획 2015. 8. 3.
앗! 티스토리는 되는군요^^

김범수 다음카카오 의장의 배짱을 보는것 같습니다. ^^


CSS코딩자동생성사이트

  홈페이지가기 

PC에서 IE, 크롬 브라우저에서 잘 작동되는 것을 확인했습니다.

아래 테스트버튼입니다. 누르면 살짝 들어가는 느낌까지 좋습니다.


Button



위 홈페이지 가면 되는 다양한 버튼샘플을 볼 수 있습니다.


일단 모바일에서도 되는지 확인해 보겠습니다. 


부라보 됩니다!



아래 소스코드 첨부합니다.

<!DOCTYPE html><a href='#' class='ClassName'>Button</a><style type="text/css">.ClassName {text-decoration:none;font-family:Arial;box-shadow:inset #ffffff 0px 5px 8px -1px,#d6d6d6 1px 3px 2px;o-box-shadow:inset #ffffff 0px 5px 8px -1px,#d6d6d6 1px 3px 2px;-moz-box-shadow:inset #ffffff 0px 5px 8px -1px,#d6d6d6 1px 3px 2px;-webkit-box-shadow:inset #ffffff 0px 5px 8px -1px,#d6d6d6 1px 3px 2px;background:#2ef1ff;background:-o-linear-gradient(90deg, #2ef1ff, #3b9ceb);background:-moz-linear-gradient( center top, #2ef1ff 5%, #3b9ceb 100% );background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2ef1ff), color-stop(1, #3b9ceb) );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2ef1ff', endColorstr='#3b9ceb');background:-webkit-linear-gradient(#2ef1ff, #3b9ceb);background:-ms-linear-gradient(#2ef1ff, #3b9ceb);background:linear-gradient(#2ef1ff, #3b9ceb);text-indent:0px;line-height:30px;-moz-border-radius:25px;-webkit-border-radius:25px;border-radius:25px;text-align:center;vertical-align:middle;display:inline-block;font-size:20px;color:#ffffff;width:100px;height:30px;padding:13px;text-shadow:#6daac2 2px 2px 0px;border-color:#659dab;border-width:2px;border-style:solid;}.ClassName:active {box-shadow:inset #ffffff 0px 5px 8px -1px,#d6d6d6 1px 0 2px;o-box-shadow:inset #ffffff 0px 5px 8px -1px,#d6d6d6 1px 0 2px;-moz-box-shadow:inset #ffffff 0px 5px 8px -1px,#d6d6d6 1px 0 2px;-webkit-box-shadow:inset #ffffff 0px 5px 8px -1px,#d6d6d6 1px 0 2px;position:relative;top:3px}.ClassName:hover {background:#3b9ceb;background:-o-linear-gradient(90deg, #3b9ceb, #2ef1ff);background:-moz-linear-gradient( center top, #3b9ceb 5%, #2ef1ff 100% );background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3b9ceb), color-stop(1, #2ef1ff) );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b9ceb', endColorstr='#2ef1ff');background:-webkit-linear-gradient(#3b9ceb, #2ef1ff);background:-ms-linear-gradient(#3b9ceb, #2ef1ff);background:linear-gradient(#3b9ceb, #2ef1ff);}</style>


반응형
저작자표시

'IT' 카테고리의 다른 글

[교육앱]파이널리스피크 영어회화 손쉽게 익힐 수 있어  (1) 2015.08.11
카카오택시 성공 후 이지택시, 리모택시 주축 스타트업 브랫빌리지 투자  (0) 2015.08.09
알토스벤처스, 소프트뱅크벤처스 등 주요 인물 만나다  (0) 2015.07.14
티스토리 애드센스 포럼 등록  (0) 2015.07.13
동영상이 대세 - 동영상 플랫폼과 기발한 동영상 광고 소개  (0) 2015.07.06


관련글

댓글

티스토리툴바