просто тестовый блог: 10 CSS стилей для кнопок блога

Эти кнопки разработаны автором блога "Mybloggertricks"

Кнопка №1

.MBT-Buttons{
background:#fff;
text-align:right;
cursor:pointer;
color:#E22400;
margin:5px 0;
float:left;
border:3px solid #E22400;
padding:5px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#E22400;
font:bold 11px sans-serif;
color:#ffffff;
}
.MBT-Buttons a {
color:#E22400;
text-decoration:none;
}
.MBT-Buttons a:hover {
text-decoration:none;
color:#fff;
}

Кнопка №2

MBT-Buttons{
background:#fff;
text-align:right;
cursor:pointer;
color:#25448B;
margin:5px 0;
float:left;
border-bottom:3px solid #25448B;
border-top:3px solid #25448B;
padding:5px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#fff;
font:bold 11px sans-serif;
border-bottom:3px dotted #25448B;
border-top:3px dotted #25448B;
}
.MBT-Buttons a {
color:#25448B;
text-decoration:none;
}
.MBT-Buttons a:hover {
text-decoration:none;
}

Кнопка №3

/*---------------- Rectangle left border-----------*/
.MBT-Buttons{
background:#fff;
text-align:right;
cursor:pointer;
color:#009999;
margin:5px 0;
float:right;
border-right:2px solid #009999;
border-left:10px solid #009999;
border-bottom:2px solid #009999;
border-top:2px solid #009999;
padding:5px;
font:bold 11px sans-serif;
}
.MBT-Buttons :hover{
background:#fff;
font:bold 11px sans-serif;
color:#006B6B;
border-right:2px dotted #009999;
border-left:10px solid #006B6B;
border-bottom:2px dotted #009999;
border-top:2px dotted #009999;
}
.MBT-Buttons a {
color:#009999;
text-decoration:none;
}
.MBT-Buttons a:hover {
color:#009999;
text-decoration:none;
}

Кнопка №4

/*-------------- Pink Left right -----------*/
.MBT-Buttons {
background:#fff;
text-align:right;
cursor:pointer;
color:#FE80DF;
margin:5px 0;
float:right;
border-right:2px solid #FE80DF;
border-left:2px solid #FE80DF;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#fff;
font:bold 11px sans-serif;
color:#CC0099;
border-right:2px solid #CC0099;
border-left:2px solid #CC0099;
}
.MBT-Buttons a {
color:#FE80DF;
text-decoration:none;
}
.MBT-Buttons a:hover {
color:#CC0099;
text-decoration:none;
}

Кнопка №5

/*------------- Brown top Bottom----------*/
.MBT-Buttons{
background:#fff;
text-align:right;
cursor:pointer;
color:#B26B00;
margin:5px 0;
float:right;
border-top:2px solid #ddd;
border-bottom:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#fff;
font:bold 11px sans-serif;
color:#B26B00;
border-top:2px solid #B26B00;
border-bottom:2px solid #B26B00;
}
.MBT-Buttons a {
color:#B26B00;
text-decoration:none;
}
.MBT-Buttons a:hover {
color:#B26B00;
text-decoration:none;
}

Кнопка №6

/*-------------- Blue Blank-----------------*/
.MBT-Buttons{
background:#0080ff;
text-align:right;
cursor:pointer;
color:#Fff;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#FFf;
font:bold 11px sans-serif;
color:#0080ff;
border:3px dotted #ddd;
}
.MBT-Buttons a {
color:#fff;
text-decoration:none;
}
.MBT-Buttons a:hover {
color:#0080ff;
text-decoration:none;
}

Кнопка №7

/*------------- Red + Dark Red------------*/
.MBT-Buttons{
background:#fffff;
text-align:right;
cursor:pointer;
color:#FE8080;
margin:5px 0;
float:right;
border:2px solid #FE8080;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#FFf;
font:bold 12px sans-serif;
color:#FF0000;
border:2px solid #FF0000;
}
.MBT-Buttons a {
color:#FE8080;
text-decoration:none;
}
.MBT-Buttons a:hover {
color:#FF0000;
text-decoration:none;
}

Кнопка №8

/*------------ White + Green -----------*/
.MBT-Buttons{
background:#fffff;
text-align:right;
cursor:pointer;
color:#008000;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#008000;
font:bold 11px sans-serif;
color:#fff;
border:2px solid #ddd;
}
.MBT-Buttons a {
color:#008000;
text-decoration:none;
}
.MBT-Buttons a:hover {
color:#fff;
text-decoration:none;
}

Кнопка №9

/*---------- Black --------------*/
.MBT-Buttons{
background:#000800;
text-align:right;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#fff;
font:bold 11px sans-serif;
color:#000800;
border:2px solid #000800;
}
.MBT-Buttons a {
color:#fff;
text-decoration:none;
}
.MBT-Buttons a:hover {
color:#000800;
text-decoration:none;
}

Кнопка №10

/*----------Orange One 1 ----------------*/

.MBT-Buttons {
background:#EB7F17;
text-align:right;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:none;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-Buttons:hover{
background:#FFB93C;
}
.MBT-Buttons a {
color:#fff;
text-decoration:none;
}
.MBT-Buttons a:hover {
color:#fff;
text-decoration:none;
}