삽질의 추억

검색
Category
CSS

Simple Button 플러그인

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

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

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

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

CSS

표 스타일

크게 작게 위로 아래로 댓글로 가기 인쇄
표헤더 표헤더 표헤더
테이블 테이블 테이블
  테이블  
  테이블  

 

<style type="text/css">

table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
margin:20px;
border:#ccc 1px solid;

-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;

-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
}
table th {
padding:15px;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;

background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
table th:first-child{
text-align: left;
padding-left:20px;
}
table tr:first-child th:first-child{
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
}
table tr:first-child th:last-child{
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
}
table tr{
text-align: center;
padding-left:20px;
}
table tr td:first-child{
text-align: left;
padding-left:20px;
border-left: 0;
}
table tr td {
padding:12px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;

background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
table tr.even td{
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
table tr:last-child td{
border-bottom:0;
}
table tr:last-child td:first-child{
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child{
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
}
table tr:hover td{
background: #f2f2f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);
}
</style>

 

<table border="1" cellpadding="1" cellspacing="1" style="width:500px;">
<thead>
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="height: 11px;"> </td>
<td style="height: 11px;"> </td>
<td style="height: 11px;"> </td>
</tr>
</tbody>
</table>

 

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

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

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

0개 첨부 됨 ( / )

Aqua Button 6

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

Button ... Button

...

 

<style type="text/css">* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iODAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMzQzNjJlIi8+PHN0b3Agb2Zmc2V0PSI4MCUiIHN0b3AtY29sb3I9IiMyNzI4MjIiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background: -moz-radial-gradient(#34362e, #272822 80%);
  background: -webkit-radial-gradient(#34362e, #272822 80%);
  background: radial-gradient(#34362e, #272822 80%);
  color: white;
  text-align: center;
  font-family: 'Trebuchet MS';
}

hr {
  width: 80%;
  border: none;
  border-top: #666 1px dotted;
}

code {
  padding: 5px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.1);
}

button {
  border: none;
  font-family: 'Trebuchet MS';
  font-weight: bold;
  cursor: pointer;
}

a, a:visited {
  color: #2963BD;
}

a:hover {
  color: #c90;
  text-decoration: none;
}

.button {
  display: inline-block;
  padding: 15px 30px;
  margin-bottom: 10px;
  text-decoration: none;
  color: #fff !important;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.button.color1 {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSI1MC4wMSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), #c03;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(50.01%, rgba(255, 255, 255, 0))), #c03;
  background: -moz-linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50.01%), #c03;
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50.01%), #c03;
  background: linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50.01%), #c03;
}
.button.color2 {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSI1MC4wMSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), #429032;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(50.01%, rgba(255, 255, 255, 0))), #429032;
  background: -moz-linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50.01%), #429032;
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50.01%), #429032;
  background: linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50.01%), #429032;
}
.button.color3 {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSI1MC4wMSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), #2963BD;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(50.01%, rgba(255, 255, 255, 0))), #2963BD;
  background: -moz-linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50.01%), #2963BD;
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50.01%), #2963BD;
  background: linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50.01%), #2963BD;
}
.button.color4 {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+PHN0b3Agb2Zmc2V0PSI1MC4wMSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), #c90;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(50.01%, rgba(255, 255, 255, 0))), #c90;
  background: -moz-linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50.01%), #c90;
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50.01%), #c90;
  background: linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50.01%), #c90;
}
.button:hover {
  opacity: .9;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 0 black;
}
.button:active, .button:focus {
  opacity: 1;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
}
</style>

 

<p>
<a class="button color1" href="#">Button</a> 
<a class="button color2" href="#">Button</a>
</p>

<hr />
<p>
<button class="button color3">Button</button>
<button class="button color4">Button</button>
</p>

 

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

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

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

0개 첨부 됨 ( / )

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개 첨부 됨 ( / )

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