Кнопки-ссылки CSS
Большинство веб-мастеров используют кнопки CSS (созданные с помощью CSS) вместо изображений кнопок. Этим они уменьшают время загрузки страницы: сокращаются http-запросы или url изображений. В дополнение к этому группу кнопок легче редактировать (через CSS), в отличие от тех же изображений. Также, в отличие от изображений, такие кнопки не пикселизируются (т.е. изображение не превращается в набор пятнышек или пятен). Все это в целом способствует применению кнопок CSS.
Эти кнопки сделаны через HTML и CSS и могут быть использованы в качестве закладок. Кнопки, представленные ниже, сделаны для ссылок, но вы также можете применять их и к другим элементам.
Чтобы использовать данные стили потребуется скопировать их код и вставить в тег HTML-элемента необходимый ‛class‛.
Все кнопки имеют закругленные углы. Закруглить углы поможет следующее правило:
CSS
a {
-moz-border-radius:3px;
border-radius:3px;
-webkit-border-radius:3px;
font-family:Tahoma;
}Gold Nugget
a {color:#e9ba00;background:#ffffcc;border:1px solid #ffe680;font-weight:normal;font-size:12px;}Heaven Isle
a {color:#65bbff;background:#f5faff;border:1px solid #cde2f5;font-weight:normal;font-size:12px;}Royal
a {color:#ff6565;background:#ffeeee;border:1px solid #f5cdcd;font-weight:normal;font-size:12px;}Remix
a {color:#e98900;background:#ffe3cc;border:1px solid #ffc280;font-weight:normal;font-size:12px;}Sentient
a {color:#3d7903;background:#d8fab6;border:1px solid #7fde24;font-weight:normal;font-size:12px;}Chakra
a {color:#0a7285;background:#b0e4ee;border:1px solid #6eb7c2;font-weight:normal;font-size:12px;}Neobux
a {color:#518200;background:#fbce00;border:1px solid #3b6600;text-shadow:1px 1px 1px #f6b100;font-weight:normal;font-size:12px;}Reiatsu
a {color:#fff;background:#8fd3e0;border:1px solid #4fa7b4;font-weight:normal;font-size:12px;}Berries
a {color:#dab6da;background:#9d1961;border:1px solid #e895cc;font-weight:normal;font-size:12px;}
a:hover {color:#dfb6cc;}Vista
a {color:#575757;background:#f5f6fa;border:1px solid #767676;font-weight:normal;font-size:12px;}Steel Body
a {color:#000;background:#fbfbfb;border:1px solid #999;font-weight:normal;font-size:12px;}Undine
a {color:#0066cc;background:#fff299;border:1px solid #d3d3d3;text-decoration:underline;}Herald
a {color:#333;background:#d8fab6;border:1px solid #3d7903;font-weight:normal;font-size:12px;}Subscribe
a {color:#000;background:#fff197;border:1px solid #ecc101;font-weight:normal;font-size:12px;}
a:hover {color:#515151;background:#fefcea;border:1px solid #e7cc00;font-weight:normal;font-size:12px;}Like
a {color:#000;background:#aada37;border:1px solid #698a14;font-weight:normal;font-size:12px;}Dislike
a {color:#000;background:#da443e;border:1px solid #881811;font-weight:normal;font-size:12px;}Hive Mind
a {color:#000;background:#ffcc07;border:1px solid #ffcc07;font-weight:normal;font-size:12px;}Google XIII
a {color:#fff;background:#00ab53;border:1px solid #6c6f8f;font-weight:normal;font-size:12px;}Agito XIII
a {color:#fff;background:#fd362c;border:1px solid #6c6f8f;font-weight:normal;font-size:12px;}Haeresis XIII
a {color:#fff;background:#ffcc00;border:1px solid #6c6f8f;font-weight:normal;font-size:12px;}Versus XIII
a {color:#fff;background:#00b1e4;border:1px solid #6c6f8f;font-weight:normal;font-size:12px;}Nature
a {color:#fff;background:#95cd3c;border:1px solid #82b82c;text-shadow:1px 1px 1px #74a02f;font-weight:normal;font-size:12px;}
a:hover {color:#fff;background:#82b82c;border:1px solid #82b82c;font-weight:normal;font-size:12px;}Psionic
a {color:#fff;background:#4cbde4;border:1px solid #33add7;text-shadow:1px 1px 1px #1e9cc7;font-weight:normal;font-size:12px;}
a:hover {color:#fff;background:#33add7;border:1px solid #33add7;text-shadow:1px 1px 1px #1e9cc7;font-weight:normal;font-size:12px;}Season
a {color:#fff;background:#d42927;border:1px solid #c65651;text-shadow:1px 1px 1px #930c0c;font-weight:normal;font-size:12px;}
a:hover {color:#fff;background:#bf100f;border:1px solid #c65651;text-shadow:1px 1px 1px #930c0c;font-weight:normal;font-size:12px;}Orange
a {color:#fff;background:#f4900e;border:1px solid #ea8001;text-shadow:1px 1px 1px #c76d01;font-weight:normal;font-size:12px;}
a:hover {color:#fff;background:#e98300;border:1px solid #d17201;text-shadow:1px 1px 1px #c76d01;font-weight:normal;font-size:12px;}Azure
a {color:#fff;background:#5e9fde;border:1px solid #4983bd;text-shadow:1px 1px 1px #4983bd;font-weight:normal;font-size:12px;}
a:hover {color:#fff;background:#3985d0;border:1px solid #4983bd;text-shadow:1px 1px 1px #4983bd;font-weight:normal;font-size:12px;}Eye Candy
a {color:#98edff;background:#ec82da;border:1px solid #e653ce;text-shadow:1px 1px 1px #e653ce;font-weight:normal;font-size:12px;}
a:hover {color:#98edff;background:#e653ce;border:1px solid #e653ce;text-shadow:1px 1px 1px #e653ce;font-weight:normal;font-size:12px;}deviantART
a {color:#bfef00;background:#53645f;border:1px solid #4b4b4b;text-shadow:1px 1px 1px #3f3f3f;font-weight:normal;font-size:12px;}
a:hover {background:#404d49;font-weight:normal;font-size:12px;}Vegetable
a {color:#d8ff00;background:#cf4bb5;border:1px solid #ab1b8f;text-shadow:1px 1px 1px #ab1b8f;font-weight:normal;font-size:12px;}
a:hover {color:#d8ff00;background:#ab1b8f;border:1px solid #ab1b8f;text-shadow:1px 1px 1px #ab1b8f;font-weight:normal;font-size:12px;}Torrent
a {color:#515151;background:#eff5fd;border:1px solid #b8d6fb;font-weight:normal;font-size:12px;}
a:hover {color:#333;background:#cbe1fc;border:1px solid #7da2ce;font-weight:normal;font-size:12px;}Subtle
a {color:#333;background:#f4f8fc;border:1px solid #c5d9e8;font-weight:normal;font-size:12px;}
a:hover {color:#000;background:#f4f8fc;border:1px solid #8ccff8;font-weight:normal;font-size:12px;}For Him
a {color:#fff;background:#1499bb;border:1px solid #1499bb;text-shadow:1px 1px 1px #00708d;font-weight:normal;font-size:12px;}
a:hover {color:#fff;background:#09b0db;border:1px solid #09b0db;font-weight:normal;font-size:12px;}For Her
a {color:#fff;background:#e400a6;border:1px solid #e400a6;text-shadow:1px 1px 1px #8d0074;font-weight:normal;font-size:12px;}
a:hover {color:#fff;background:#f134be;border:1px solid #f134be;font-weight:normal;font-size:12px;}For Them
a {color:#fff;background:#82bb14;border:1px solid #82bb14;text-shadow:1px 1px 1px #538c01;font-weight:normal;font-size:12px;}
a:hover {color:#fff;background:#8dcf00;border:1px solid #8dcf00;text-shadow:1px 1px 1px #538c01;font-weight:normal;font-size:12px;}For Us
a {color:#fff;background:#bbb514;border:1px solid #c0be12;text-shadow:1px 1px 1px #989201;font-weight:normal;font-size:12px;}
a:hover {color:#fff;background:#dbd409;border:1px solid #dbd409;font-weight:normal;font-size:12px;}a {color:#121516;background:#cbdabf;border:1px solid #93a98f;font-weight:normal;font-size:12px;}
a:hover {color:#5d7062;background:#d7e3d0;font-weight:normal;font-size:12px;}Favorite
a {color:#121516;background:#c8e967;border:1px solid #93a98f;font-weight:normal;font-size:12px;}
a:hover {color:#668329;background:#daf36b;font-weight:normal;font-size:12px;}High Btns
a {color:#9db3d9;background:#e4eefa;border:1px solid #c3cfe6;font-weight:normal;font-size:12px;}
a:hover {color:#49689e;background:#f1f6fd;font-weight:normal;font-size:12px;}Low Tabs
a {color:#404040;background:#a8cbf7;border:1px solid #82a0c3;font-weight:normal;font-size:12px;}
a:hover {color:#404040;background:#c5ddf9;border:1px solid #7691b4;font-weight:normal;font-size:12px;}Publish Post
a {color:#fff;background:#ff7700;border:1px solid #993300;font-weight:normal;font-size:12px;}Delete Post
a {color:#fff;background:#6699ff;border:1px solid #003399;font-weight:normal;font-size:12px;}Sign In
a {color:#fff;background:#3366cc;border:1px solid #6699ff;font-weight:normal;font-size:12px;}Design
a {color:#baa68e;background:#e1d4c0;border:1px solid #baa68e;font-weight:normal;font-size:12px;}
a:hover {color:#333;background:#f5ede3;border:1px solid #826c55;font-weight:normal;font-size:12px;}Show Posts
a {color:#dbf500;background:#2d98ec;border:1px solid #2d98ec;text-decoration:underline;}BTW btn-Wt
a {color:#fff;background:#3ea1ef;border:1px solid #1581d5;text-shadow:1px 1px 1px #0d7acf;font-weight:normal;font-size:12px;}BTW btn-Ye
a {color:#ffec00;background:#3ea1ef;border:1px solid #1581d5;text-shadow:1px 1px 1px #0d7acf;font-weight:normal;font-size:12px;}BTW btn-Gr
a {color:#d8ff00;background:#3ea1ef;border:1px solid #1581d5;text-shadow:1px 1px 1px #0d7acf;font-weight:normal;font-size:12px;}BTW btn-Or
a {color:#ffd200;background:#3ea1ef;border:1px solid #1581d5;text-shadow:1px 1px 1px #0d7acf;font-weight:normal;font-size:12px;}Mango
a {color:#518200;background:#fbce00;border:1px solid #3b6600;text-shadow:1px 1px 1px #fff;font-weight:normal;font-size:12px;}Titans
a {color:#121212;background:#9a9a9a;border:1px solid #666;text-shadow:1px 1px 1px #b8b8b8;font-weight:normal;font-size:12px;}
a:hover {color:#121212;background:#b4b4b4;border:1px solid #666;text-shadow:1px 1px 1px #b8b8b8;font-weight:normal;font-size:12px;}Fortitude
a {color:#333;background:#f3f3f3;border:1px solid #dbdbdb;text-shadow:1px 1px 1px #fff;font-weight:normal;font-size:12px;}Emboss
a {color:#fff;background:#555455;border:1px solid #464546;text-shadow:1px 1px 1px #464546;font-weight:normal;font-size:12px;}Memory
a {color:#4c4b4b;background:#d7d7d7;border:1px solid #d1d1d1;text-shadow:1px 1px 1px #fff;font-weight:normal;font-size:12px;}Xehanort
a {color:#ccc;background:#0f020b;border:1px solid #333;font-weight:normal;font-size:12px;}
a:hover {color:#ccc;background:#282828;border:1px solid #333;font-weight:normal;font-size:12px;}Coffee Blend
a {color:#fefffd;background:#351a0d;border:1px solid #b46928;text-shadow:1px 1px 1px #70420c;font-weight:normal;font-size:12px;}Silver Atom
a {color:#f7f7f7;background:#bc110e;border:1px solid #e0e0e0;text-shadow:1px 1px 1px #8c0909;font-weight:normal;font-size:12px;}Button-0
a {color:#333;background:#eeeeed;border:1px solid #888;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size:11px;padding:6px 13px 6px;font-weight:bold;}Button-1
a {color:#3b5998;background:#eceef5;border:1px solid #cad4e7;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size:11px;padding:6px 13px 6px;font-weight:bold;}Button-2
a {color:#fff;background:#6079ab;border:1px solid #29457f;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size:11px;padding:6px 13px 6px;font-weight:bold;}Button-3
a {color:#333;background:#ececec;border:1px solid #ddd;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size:11px;padding:6px 13px 6px;font-weight:bold;}Button-4
a {color:#fff;background:#73ac59;border:1px solid #3c6f23;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size:11px;padding:6px 13px 6px;font-weight:bold;}Button-5
a {color:#c76026;background:#ffcd4d;border:1px solid #c76026;font-family:"lucida grande", tahoma, verdana, arial, sans-serif;font-size:11px;padding:6px 13px 6px;font-weight:bold;}
Комментарии к статье
Хоть и не сложно но ,просто супер !
Отлично! Огромное спасибо!