Categories: Юзабилити

Кнопки стиля металлик с эффектом нажатия на CSS

Кнопки стиля металлик с эффектом нажатия и выполненные с помощью CSS я недавно нашла в интернете и спешу с вами поделиться.
✈1кнопкаi
Эти кнопки настолько мне понравились, что я тут же стала использоваться их на своем сайте. Кончено, мне пришлось внести некоторые правки. Поэтому и предлагаю Вам уже свой откорректированный вариант. Пользуйтесь в свое удовольствие.

Внимание! CSS стили данного примера изначально были разработаны для браузеров Chrome и Safari, поэтому именно в этих браузерах стили кнопок работают наиболее корректно. Я постаралась адаптировать стили для всех браузеров, но не во всех, кнопки выглядят одинаково. В старых версиях браузеров они могут не работать вовсе.

HTML

Ниже вы видите html самих кнопок. Для разных по форм кнопок, нужно вставить разные стили

Круглая кнопка 
<a href="/" class="buttons metal radial">✈</a> 

Прямоугольные кнопки 
<a href="/" class="buttons metal linear">1</a> 
<a href="/" class="buttons metal linear">кнопка</a> 

Овальная кнопка 
<a href="" class="buttons metal linear oval">i</a>

CSS

/* metal buttons */ 

.buttons { border: none; display: inline-block; text-decoration: none; color: #000000;} 

/* Metal ------------------------- */ 
.metal { 
  margin: 20px; 
  font: bold 6em/1em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
  text-align: center; 
  color: hsla(0,0%,20%,1); 
  text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px; 
  background-color: hsl(0,0%,90%); 
  box-shadow: inset hsla(0,0%,15%, 1) 0 0px 0px 4px, /* border */ 
  inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */ 
  inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */ 
  inset hsla(0,0%,100%,.7) 0 2px 1px 7px, /* top HL */ 
  hsla(0,0%, 0%,.15) 0 -5px 6px 4px, /* outer SD */ 
  hsla(0,0%,100%,.5) 0 5px 6px 4px; /* outer HL */  
  transition: color .2s; 
} 

/* Radial ------------------------- */ 
.radial.metal { 
  width: 160px; 
  height: 160px; 
  line-height: 160px; 
  border-radius: 80px; 
  background-image: -webkit-radial-gradient( 50% 0%, 8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), 
  -webkit-radial-gradient( 50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%), 
  -webkit-radial-gradient( 0% 50%, 50% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), 
  -webkit-radial-gradient( 100% 50%, 50% 5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), 
   
  -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 3.5%), 
  -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%), 
  -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%), 
   
  -webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%); 
   
  background-image: -o-radial-gradient( 50% 0%, 8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), 
  -o-radial-gradient( 50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%), 
  -o-radial-gradient( 0% 50%, 50% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), 
  -o-radial-gradient( 100% 50%, 50% 5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), 
   
  -o-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 3.5%), 
  -o-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%), 
  -o-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%), 
   
  -o-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%); 
   
  background-image: -webkit-radial-gradient( 50% 0%, 8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), 
  -ms-radial-gradient( 50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%), 
  -ms-radial-gradient( 0% 50%, 50% 7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), 
  -ms-radial-gradient( 100% 50%, 50% 5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), 
   
  -ms-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 3.5%), 
  -ms-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%), 
  -ms-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%), 
   
  -ms-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%); 
   
  background-image: -moz-radial-gradient(50% 0%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
  -moz-radial-gradient(50% 100%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%), 
  -moz-radial-gradient(0% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%), 
  -moz-radial-gradient(100% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%); 
   
   
  background: 
  -moz-repeating-radial-gradient( 50% 50%, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 3%, hsla(0,0%, 0%,.1) 3.5%),  
  -moz-repeating-radial-gradient( 50% 50%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%,.1) 7.5%),  
  -moz-repeating-radial-gradient( 50% 50%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),  
  -moz-radial-gradient( 50% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);  
} 

.metal.radial:before, .metal.radial:after { 
  content: ""; 
  width: inherit; 
  height: inherit; 
  border-radius: inherit; 
   
  /* fake conical gradients */ 
  background-image: -webkit-radial-gradient( 50% 0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%), 
  -webkit-radial-gradient( 50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%), 
  -webkit-radial-gradient( 0% 50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%), 
  -webkit-radial-gradient( 100% 50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%); 
} 

.metal.radial:before { transform: rotate( 65deg); } 
.metal.radial:after { transform: rotate(-65deg); } 

/* Linear ------------------------- */ 
  .metal.linear { 
  font-size: 2em; 
  line-height: 60px; 
  padding-right: 30px; 
  padding-left: 30px; 
  text-decoration:none;  
  border-radius: .5em; 
  background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%), 
  -webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%), 
  -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%), 
   
  linear-gradient(180deg, hsl(0,0%,78%) 0%,  
  hsl(0,0%,90%) 47%,  
  hsl(0,0%,78%) 53%, 
  hsl(0,0%,70%)100%); 

background-image: -moz-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%),  
  -moz-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%),  
  -moz-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),  
  linear-gradient(180deg, hsl(0,0%,78%) 0%,  
  hsl(0,0%,90%) 47%,  
  hsl(0,0%,78%) 53%, 
  hsl(0,0%,70%)100%); 
   
  background-image: -o-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%),  
  -o-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%),  
  -o-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),  
  linear-gradient(180deg, hsl(0,0%,78%) 0%,  
  hsl(0,0%,90%) 47%,  
  hsl(0,0%,78%) 53%, 
  hsl(0,0%,70%)100%); 
   
  background-image: -ms-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%),  
  -ms-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%),  
  -ms-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),  
  linear-gradient(180deg, hsl(0,0%,78%) 0%,  
  hsl(0,0%,90%) 47%,  
  hsl(0,0%,78%) 53%, 
  hsl(0,0%,70%)100%); 
   
} 

/* Oval ------------------------- */ 
.metal.linear.oval { 
  padding: 0px! important; 
  width: 70px; 
  height: 60px; 
  line-height: 60px ; 
  border-radius: 50%; 
  font: italic bold 3em/50px Georgia, "Times New Roman", Times, serif; 
} 

/* hover ------------------------- */ 

.metal:hover { 
   
  color: hsl(210, 100%, 40%); 
  text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px; 
  box-shadow:  
  inset hsla(210,100%,30%, 1) 0 0px 0px 4px, /* border */ 
  inset hsla(210,100%,15%, .4) 0 -1px 5px 4px, /* soft SD */ 
  inset hsla(210,100%,20%,.25) 0 -1px 0px 7px, /* bottom SD */ 
  inset hsla(210,100%,100%,.7) 0 2px 1px 7px, /* top HL */ 
   
  hsla(210,100%,75%, .8) 0 0px 3px 2px, /* outer SD */ 
  hsla(210,50%,40%, .25) 0 -5px 6px 4px, /* outer SD */ 
  hsla(210,80%,95%, 1) 0 5px 6px 4px; /* outer HL */ 
}
Больше статей: Дизайн отзывов, рекомендаций - тестимониал (testimonial) для сайта
Leave a Comment
Share
Tags: Button кнопка металлик стиля
% дней назад

Recent Posts

  • Excel

Как правильно открыть CSV с многострочными ячейками в Excel

Если при открытие csv файла с помощью excel У все поехали ячейки - это простой… Read More

% дней назад
  • Python

Загрузка проекта на Github и Автодеплой на сервер

Простые шаги как происходит Загрузка проекта на Github и Автодеплой на сервер Сделайте работу проще! Read More

% дней назад
  • Python
  • Полезная минутка

Миграция базы данных в проектах Python

Миграция базы данных - помогают с этим библиотеки SQLAlchemy и Alembic. Read More

% дней назад
  • Python

Команды Git – Шпаргалка по основным командам Git

Основные Команды Git, которые точно пригодятся. Сохрани себе шпаргалку Git Read More

% дней назад
  • Python

Установка PostgreSQL на сервер Ubuntu и подключение через pgAdmin

Установка PostgreSQL на сервер Read More

% дней назад
  • Полезная минутка

Как создать PrimaryKey для таблицы в PostgreSQL

Как создать PrimaryKey в талице базы данных SQL [РЕШЕНО] Ошибка relation tablename_id_seq doesn't exist Read More

% дней назад