삽질의 추억

검색
Category

Aqua Button 7

크게 작게 위로 아래로 댓글로 가기 인쇄
 
HTML5

​

<style type="text/css">

.yy_button{
    cursor:pointer;
position:relative;
width:120px;
height:34px;
padding:5px 6px 3px;
-webkit-border-radius:16px;
-moz-border-radius:16px;
border:2px solid #ccc;

font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight:800;
color:#fff;
text-shadow: rgba(10,10,10,0.5) 1px 2px 2px;
text-align:center;
vertical-align:middle;
overflow:hidden;
}

.aqua{
background-color: rgba(60, 132, 198, 0.8);
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; 
}

.yy_button .blaze {
position: absolute;
top: 0;
left: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
height: 1px;
width: 110px;
padding: 8px 0;
background-color: rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%);  
}

.yy_button:hover {
color:#000;
text-shadow: rgb(255, 255, 255) 0px 0px 5px;
top:1px;
}

</style>

 

<div class="yy_button aqua">
  <div class="blaze"> </div>
  HTML5
</div>

 

위로 아래로 댓글로 가기 인쇄
댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )
에디터 사용하기 닫기

AQUS BUTTON 5

크게 작게 위로 아래로 댓글로 가기 인쇄
Press Me! Press Me! Press Me! Press Me!

​

<style type="text/css">
.shinybtn {
    border: 2px solid #99F;
    border-radius: 20px;
    font: 600 12pt/1 Lucida Sans,Verdana,sans-serif;
    display: inline-block;
    padding: 8px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    color: white;
    text-shadow: 1px 2px 2px rgba(0,0,0,0.4);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6), inset 0 -8px 4px -8px rgba(255,255,255,0.2);
}

a.shinybtn {
    text-decoration: none;
    margin: 1em 1em;
    min-width: 100px;
}

.shinybtn:before, .shinybtn:after {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: inherit;
    z-index: -1;
}

.shinybtn:before {
    content: "";
    background-color: rgba(255,255,255,0.2);
    top: 2px;
    bottom: 60%;
    left: 8px;
    right: 8px;
    box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
    border-size: 0;
}

.blue {
    background-color: #48F;
    border-color: #37E;
}

.red {
    background-color: #F44;
    border-color: #F44;
}

.green {
    background-color: #4C4;
    border-color: #4C4;
}

.gray {
    background-color: #CCC;
    border-color: #BBB;
}

</style>

 

<div class="container">
   <a class="shinybtn blue" href="#">Press Me!</a> 
   <a class="shinybtn red" href="#">Press Me!</a> 
   <a class="shinybtn green" href="#">Press Me!</a> 
   <a class="shinybtn gray" href="#">Press Me!</a>
</div>

 

위로 아래로 댓글로 가기 인쇄
댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

CSS

Button Style 3

크게 작게 위로 아래로 댓글로 가기 인쇄

 

<style type="text/css">
@charset "UTF-8";
button {
  overflow: hidden;
  position: relative;
  margin: 10px;
  padding: 10px 30px;
  border: 1px solid #F85F5F;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(0, 0, 0, 0.6);
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMDcwNDI4IiB5MT0iMC42MDA1ODIiIHgyPSItMC4wNzA0MjgiIHkyPSIwLjM5OTQxOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjA1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZWFlYSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjZmI5YTlhIi8+PHN0b3Agb2Zmc2V0PSI4NSUiIHN0b3AtY29sb3I9IiNmODVmNWYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYjlkOWQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: linear-gradient(-80deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 60%), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #feeaea), color-stop(25%, #fb9a9a), color-stop(85%, #f85f5f), color-stop(100%, #fb9d9d));
  background-image: -moz-linear-gradient(170deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 60%), -moz-linear-gradient(#feeaea, #fb9a9a 25%, #f85f5f 85%, #fb9d9d);
  background-image: -webkit-linear-gradient(170deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 60%), -webkit-linear-gradient(#feeaea, #fb9a9a 25%, #f85f5f 85%, #fb9d9d);
  background-image: linear-gradient(-80deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 60%), linear-gradient(#feeaea, #fb9a9a 25%, #f85f5f 85%, #fb9d9d);
  background-repeat: repeat-x;
  font-family: "맑은 고딕";
  font-weight: bold;
  font-size: 13px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
}
button:active {
  background-color: #FA8181;
  background-image: none;
  -moz-box-shadow: inset 0 0px 4px rgba(0, 0, 0, 0.15), 2px 2px 6px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: inset 0 0px 4px rgba(0, 0, 0, 0.15), 2px 2px 6px rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0px 4px rgba(0, 0, 0, 0.15), 2px 2px 6px rgba(0, 0, 0, 0.6);
}
</style>

 

 

<p>
<button type="button"> 버튼스타일 </button>
</p>

 

위로 아래로 댓글로 가기 인쇄
댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

CSS

Button Style 2

크게 작게 위로 아래로 댓글로 가기 인쇄

PREVIEW BUTTON

 

<style type="text/css">

.button_example{
border:1px solid #a8c1d5; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -2px -2px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
 background-color: #CEDCE7; background-image: -webkit-gradient(linear, left top, left bottom, from(#CEDCE7), to(#596a72));
 background-image: -webkit-linear-gradient(top, #CEDCE7, #596a72);
 background-image: -moz-linear-gradient(top, #CEDCE7, #596a72);
 background-image: -ms-linear-gradient(top, #CEDCE7, #596a72);
 background-image: -o-linear-gradient(top, #CEDCE7, #596a72);
 background-image: linear-gradient(to bottom, #CEDCE7, #596a72);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#CEDCE7, endColorstr=#596a72);
}

.button_example:hover{
 border:1px solid #8aabc5;
 background-color: #acc4d6; background-image: -webkit-gradient(linear, left top, left bottom, from(#acc4d6), to(#434f55));
 background-image: -webkit-linear-gradient(top, #acc4d6, #434f55);
 background-image: -moz-linear-gradient(top, #acc4d6, #434f55);
 background-image: -ms-linear-gradient(top, #acc4d6, #434f55);
 background-image: -o-linear-gradient(top, #acc4d6, #434f55);
 background-image: linear-gradient(to bottom, #acc4d6, #434f55);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#acc4d6, endColorstr=#434f55);
}
</style>

 

PREVIEW BUTTON

 

<p>
 <a class="button_example" href="#">BUTTON Style</a>
</p>

 

 

위로 아래로 댓글로 가기 인쇄
댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

Sketchbook5

댓글 편집기 부분 접기

크게 작게 위로 아래로 댓글로 가기 인쇄

댓글 편집기를 필요할 때만 펼쳐서 사용할 수 있도록 접어두는 방법입니다. 

  1. CKEditor 플러그인 중 detail 플러그인을 설치합니다. 
  2. XE 사용자라면 이 detail 플러그인에서 정의한 CSS를 XE의 레이아웃의 CSS 등록하는 부분에 등록합니다. 
  3. 필요한 부분에 <details><summary> 제목에 해당하는 부분 </summary> 감추어 두려는 부분 </details> 처럼 넣어 주면 됩니다. 

 

<details><summary> <img src="/@PublicData/images/Bullet/00427.gif"> 댓글({$oDocument->getCommentcount()}) 남기기...</summary>
<div class="cmt_editor" style="margin-top:30px"|cond="$mi->cmt_wrt_position=='cmt_wrt_btm' && $oDocument->getCommentcount()">
...
...
...
<!--@end-->
</div>
</details><br />

 

위로 아래로 댓글로 가기 인쇄
댓글(0) 남기기...
사진 및 파일 첨부

여기에 파일을 끌어 놓거나 왼쪽의 버튼을 클릭하세요.

파일 크기 제한 : 0MB (허용 확장자 : *.*)

0개 첨부 됨 ( / )

목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 27 Next
/ 27
rhwlsghkcocndgus XE1.9.2 STAGE1.5.2
서버에 요청 중입니다. 잠시만 기다려 주십시오...