버튼은 이미지와 달리 클릭시 이벤트를 주는 성격으로 링크시 걸리는 테두리 및 효과등에 차이가 있다.

slide_ 유투브 재생정지 (iframe)

http://jsfiddle.net/jide/gxn1xgof/

http://blog.mckwon.com/425

ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;}

li{list-style: square inside;} 로 해결.

예제

http://www.w3schools.com/cssref/pr_list-style-type.asp

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_textoverflow

document.getElementById("myDIV").style.textOverflow = "ellipsis";

object.style.textOverflow="clip|ellipsis|string|initial|inherit"

http://themicon.co/theme/angle/v1.3/#/app/dashboard

<p style="cursor:auto">Auto</p>
<p style="cursor:crosshair">Crosshair</p>
<p style="cursor:default">Default</p>
<p style="cursor:pointer">Pointer</p>
<p style="cursor:move">Move</p>
<p style="cursor:e-resize">e-resize</p>
<p style="cursor:ne-resize">ne-resize</p>
<p style="cursor:nw-resize">nw-resize</p>
<p style="cursor:n-resize">n-resize</p>
<p style="cursor:se-resize">se-resize</p>
<p style="cursor:sw-resize">sw-resize</p>
<p style="cursor:s-resize">s-resize</p>
<p style="cursor:w-resize">w-resize</p>
<p style="cursor:text">text</p>
<p style="cursor:wait">wait</p>
<p style="cursor:help">help</p>

Auto

Crosshair

Default

Pointer

Move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help

TweenMax 를 비롯한 jquery를 이용한 효과들.

http://greensock.com/