Красивые CSS3 Кнопки с Hover Эффектом #18

Красивый CSS3 Эффект для Изображений #17
Красивый CSS3 Эффект для Изображений #17
07/06/2017
Шикарный CSS Эффект для Изображений при Наведении Курсора #19
Шикарный CSS Эффект для Изображений при Наведении Курсора #19
07/06/2017
Красивые CSS3 Кнопки с Hover Эффектом #18

Красивые CSS3 Кнопки с Hover Эффектом #18

Скачать код с Демо дополнениями

<a href="#" class="snip1565 ion-ios-star-outline"></a>
<a href="#" class="snip1565 hover blue ion-ios-list-outline"></a>
<a href="#" class="snip1565 ion-ios-chatboxes-outline"></a>
<a href="#" class="snip1565 ion-ios-home-outline"></a>
<a href="#" class="snip1565 ion-ios-pie-outline"></a>
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1565 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-perspective: 50em;
  perspective: 50em;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  background-color: #7e1946;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: 0 0 5px rgba(0, 0, 0, 0.5);
  color: #e6e6e6;
  display: inline-block;
  font-size: 40px;
  height: 75px;
  line-height: 75px;
  margin: 40px;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 75px;
}

.snip1565:before {
  color: #fff;
  text-shadow: 1px 1px 5px #000000;
  opacity: 0.75;
}

.snip1565:after {
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
  bottom: 0;
  content: '';
  background-color: #69153a;
  border-radius: 5px 0 0 5px;
  z-index: -1;
}

.snip1565:hover,
.snip1565:active,
.snip1565.hover {
  color: #7e1946;
  background-color: #1d5599;
}

.snip1565:hover:after,
.snip1565:active:after,
.snip1565.hover:after {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background-color: #2468bb;
}

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

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