1. Главная страница » Как сделать...? » Примеры кнопок разных цветов и размеров на CSS

Примеры кнопок разных цветов и размеров на CSS

Автор: | 09.02.2013

             Кнопка Кнопка Кнопка Кнопка Кнопка

             Кнопка Кнопка Кнопка Кнопка Кнопка

             Кнопка Кнопка Кнопка Кнопка Кнопка

             Кнопка Кнопка Кнопка Кнопка Кнопка

             Кнопка Кнопка Кнопка Кнопка Кнопка

             Кнопка Кнопка Кнопка Кнопка Кнопка

Мы каждой кнопки задаем классы, а в файле «css_cnopci.css» каждому классу прописываем необходимые свойства.

файл index_cnopci.html:

<!DOCTYPE HTML>
<html>
<head>

 <title>CSS кнопки</title>

<link rel="stylesheet" href="css_cnopci.css" type="text/css" media="screen"/>
</head>
<body>
 <a href="#none" class="button small blue" title="Button">Кнопка</a>
 <a href="#none" class="button normal blue" title="Button">Кнопка</a>
 <a href="#none" class="button medium blue" title="Button">Кнопка</a>
 <a href="#none" class="button big blue" title="Button">Кнопка</a>
 <a href="#none" class="button megabig blue" title="Button">Кнопка</a>

<br/><br/><br/>

 <a href="#none" class="button small green" title="Button">Кнопка</a>
 <a href="#none" class="button normal green" title="Button">Кнопка</a>
 <a href="#none" class="button medium green" title="Button">Кнопка</a>
 <a href="#none" class="button big green" title="Button">Кнопка</a>
 <a href="#none" class="button megabig green" title="Button">Кнопка</a>
        
<br/><br/><br/>

 <a href="#none" class="button small black" title="Button">Кнопка</a>
 <a href="#none" class="button normal black" title="Button">Кнопка</a>
 <a href="#none" class="button medium black" title="Button">Кнопка</a>
 <a href="#none" class="button big black" title="Button">Кнопка</a>
 <a href="#none" class="button megabig black" title="Button">Кнопка</a>

<br/><br/><br/>

 <a href="#none" class="button small white" title="Button">Кнопка</a>
 <a href="#none" class="button normal white" title="Button">Кнопка</a>
 <a href="#none" class="button medium white" title="Button">Кнопка</a>
 <a href="#none" class="button big white" title="Button">Кнопка</a>
 <a href="#none" class="button megabig white" title="Button">Кнопка</a>

<br/><br/><br/>

 <a href="#none" class="button small red" title="Button">Кнопка</a>
 <a href="#none" class="button normal red" title="Button">Кнопка</a>
 <a href="#none" class="button medium red" title="Button">Кнопка</a>
 <a href="#none" class="button big red" title="Button">Кнопка</a>
 <a href="#none" class="button megabig red" title="Button">Кнопка</a>
        
<br/><br/><br/>

 <a href="#none" class="button small orange" title="Button">Кнопка</a>
 <a href="#none" class="button normal orange" title="Button">Кнопка</a>
 <a href="#none" class="button medium orange" title="Button">Кнопка</a>
 <a href="#none" class="button big orange" title="Button">Кнопка</a>
 <a href="#none" class="button megabig orange" title="Button">Кнопка</a>

</body>
</html>

файл css_cnopci.css:

.button {
    font-family: Helvetica, Arial, sans-serif;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    color: white;
    text-shadow: 0 -1px 1px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
    -o-box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
    box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.5);
}
.small, .normal, .medium, .big, .megabig {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    padding: 5px 10px;
}
.small {
    font-size: 11px;
}
.normal {
    font-size: 14px;
}
.medium {
    font-size: 18px;
}
.big {
    font-size: 24px;
}
.megabig {
    font-size: 32px;
}

/* Blue */
.blue {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52A8E8), to(#377AD0));
    background-image: -moz-linear-gradient(0% 100% 90deg, #377AD0, #52A8E8);
    background-color: #52A8E8;
    border: 1px solid #20559A;
}
.blue:hover, .blue:focus {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#54A1D8), to(#1967CA));
    background-image: -moz-linear-gradient(0% 100% 90deg, #1967CA, #54A1D8);
    background-color: #52A8E8;
    color: white;
}
.blue:active {
    background: #2D7CD1;
    color: white;
}
/* Green */
.green {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#21AE60), to(#2E8B57));
    background-image: -moz-linear-gradient(0% 100% 90deg, #2E8B57, #21AE60);
    background-color: #21AE60;
    border: 1px solid #21633D;
}
.green:hover, .green:focus {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#21AE60), to(#28794B));
    background-image: -moz-linear-gradient(0% 100% 90deg, #28794B, #21AE60);
    background-color: #21AE60;
    color: white;
}
.green:active {
    background: #2B8452;
    color: white;
}
/* Black */
.black {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#000));
    background-image: -moz-linear-gradient(0% 100% 90deg, #000, #666);
    background-color: #666;
    border: 1px solid #444;
}
.black:hover, .black:focus {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#000));
    background-image: -moz-linear-gradient(0% 100% 90deg, #000, #444);
    background-color: #444;
    color: white;
}
.black:active {
    background: #555;
    color: white;
}
/* White */
.white {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#ccc));
    background-image: -moz-linear-gradient(0% 100% 90deg, #ccc, #fafafa);
    background-color: #ccc;
    border: 1px solid #A6A6A6;
        color: #333;
        text-shadow: 1px 1px 1px #fff;
}
.white:hover, .white:focus {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BCBCBC), to(#FCFCFC));
    background-image: -moz-linear-gradient(0% 100% 90deg, #FCFCFC, #BCBCBC);
    background-color: #BCBCBC;
    color: #555;
}
.white:active {
    background: #eee;
    color: #333;
}
/* Red */
.red {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BC1A02), to(#650500));
    background-image: -moz-linear-gradient(0% 100% 90deg, #650500, #BC1A02);
    background-color: #A60B00;
    border: 1px solid #6E0A01;
}
.red:hover, .red:focus {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D05F4E), to(#96514D));
    background-image: -moz-linear-gradient(0% 100% 90deg, #96514D, #D05F4E);
    background-color: #96514D;
    color: white;
}
.red:active {
    background: #96514D;
    color: white;
}
/* Orange */
.orange {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F06E24), to(#E04607));
    background-image: -moz-linear-gradient(0% 100% 90deg, #E04607, #F06E24);
    background-color: #E04607;
    border: 1px solid #C43C06;
}
.orange:hover, .orange:focus {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F59B66), to(#EA7D52));
    background-image: -moz-linear-gradient(0% 100% 90deg, #EA7D52, #F59B66);
    background-color: #EA7D52;
    color: white;
}
.orange:active {
    background: #D8744D;
    color: white;
}

Рекомендуем к прочтению

Читайте также:  Как сделать...?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *