Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Разговор подруг:
- Мой муж программист - дебил. Сделали сыну прививки и он написал на ребенке маркером: «Вирусная база обновлена 01.10.12 г.»

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

Говорят, что перед смертью админ вспоминает все свои пароли.

  Моя группа в контакте:



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

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


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


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


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


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


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

Мы каждой кнопки задаем классы, а в файле "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;
}

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь