Aqua Scroll Bar example

HTML

<div style="max-width:640px;margin:0 auto;padding:64px 32px 160px;font:16px/1.6 'Lucida Grande','Helvetica Neue',sans-serif;color:#222">
  <h1 style="font-size:28px;font-weight:600;margin:0 0 8px">Aqua scrollbar</h1>
  <p style="margin:0 0 32px;color:#666">Scroll the page to see the thumb, track and paired arrow buttons.</p>
  <div style="height:2400px;border-top:1px solid #e3e3e3"></div>
</div>

CSS

html,body{margin:0;background:#fff}
a{color:#2a64c8}a:hover{color:#1a4596}
::-webkit-scrollbar{width:24px;height:24px}
::-webkit-scrollbar-track{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAaCAYAAACtv5zzAAAWfmNhQlgAABZ+anVtYgAAAB5qdW1kYzJwYQARABCAAACqADibcQNjMnBhAAAAFlhqdW1iAAAAR2p1bWRjMm1hABEAEIAAAKoAOJtxA3VybjpjMnBhOmY1NGJkY2M1LTYwZWMtNDFlYi04ZTEzLWNkYTQ1ZWFhNTMxYwAAAAOTanVtYgAAAClqdW1kYzJhcwARABCAAACqADibcQNjMnBhLmFzc2VydGlvbnMAAAAAuGp1bWIAAABEanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5pbmdyZWRpZW50LnYzAAAAABhjMnNofhCe6TR2yIvtPy/EtxRl5AAAAGxjYm9yo2lkYzpmb3JtYXRpaW1hZ2UvcG5namluc3RhbmNlSUR4LHhtcDppaWQ6M2YyYTRmOGQtYjlmOC00MWJiLTgzZTEtNjQwZjg3MWFiZTc1bHJlbGF0aW9uc2hpcGhwYXJlbnRPZgAAAeJqdW1iAAAAQWp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuYWN0aW9ucy52MgAAAAAYYzJzaE/KgtZ4QLQY8hEfy1+YV90AAAGZY2JvcqJnYWN0aW9uc4KiZmFjdGlvbmtjMnBhLm9wZW5lZGpwYXJhbWV0ZXJzoWtpbmdyZWRpZW50c4GiY3VybHgtc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5pbmdyZWRpZW50LnYzZGhhc2hYIAtaLROL6kxeF/1Kmp0Cffyllh8gUrNkCmjl3oj6GZl5pGZhY3Rpb254HWNvbS5hbnRocm9waWMuY2xhdWRlLnByb3ZpZGVkanBhcmFtZXRlcnOheB9jb20uYW50aHJvcGljLm9yaWdpbi1jb25maWRlbmNlZ3Vua25vd25rZGVzY3JpcHRpb254ZkNsYXVkZSBwcm92aWRlZCB0aGlzIGZpbGUgYXQgdGhlIHJlcXVlc3Qgb2YgYSB1c2VyIGFuZCBtYXkgaGF2ZSBjcmVhdGVkIG9yIG1vZGlmaWVkIHRoZSBmaWxlIGNvbnRlbnRzLm1zb2Z0d2FyZUFnZW50oWRuYW1lZkNsYXVkZXJhbGxBY3Rpb25zSW5jbHVkZWT1AAAAyGp1bWIAAABAanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5oYXNoLmRhdGEAAAAAGGMyc2iEql6SlZpH5FfeRe5J4+uaAAAAgGNib3KlY2FsZ2ZzaGEyNTZjcGFkTQAAAAAAAAAAAAAAAABkaGFzaFgglRhWsHy/vsnS9uT96LknJDSLgY7Ve0Cz6H2t7uIsBJJkbmFtZW5qdW1iZiBtYW5pZmVzdGpleGNsdXNpb25zgaJlc3RhcnQYIWZsZW5ndGgZFooAAAI+anVtYgAAACdqdW1kYzJjbAARABCAAACqADibcQNjMnBhLmNsYWltLnYyAAAAAg9jYm9ypWNhbGdmc2hhMjU2aXNpZ25hdHVyZXhNc2VsZiNqdW1iZj0vYzJwYS91cm46YzJwYTpmNTRiZGNjNS02MGVjLTQxZWItOGUxMy1jZGE0NWVhYTUzMWMvYzJwYS5zaWduYXR1cmVqaW5zdGFuY2VJRHgseG1wOmlpZDo5NGUxNzZjOS1jMDlmLTQyMmYtODA4My00YzJhZTYzNjEyOTVyY3JlYXRlZF9hc3NlcnRpb25zg6JjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNk...