• Страница 2 из 2
  • «
  • 1
  • 2
Форум » Web-Раздел » Начинающему вебмастеру » Кнопки для сайта с hover эффектом на CSS3 (Создайте уникальные эффекты зависания кнопок при CSS3)
Кнопки для сайта с hover эффектом на CSS3
Kosten
Дата: Воскресенье, 2018-05-27, 18:38 | Сообщение 1
Онлайн
Администраторы
Сообщений:25131
Награды: 57


В поисках красивой или элегантной конки, что создана на CSS, со стильным hover эффектом, то в этой колонке их полная подборка, где вы можете найти под свой дизайн, что тем обновите свой интернет ресурс. Если разобраться, то думаю спорить не станет, что кнопка, это обязательный элемент для любого тематического интернет ресурса. При помощи технологии CSS вы можете создавать оригинальные и красивые кнопки под любой дизайн, где стилистика будет уникальной с аналогичным эффектом.

Если решили создать несколько уникальных кнопок с уникальными эффектами зависания, то здесь как не крути, то нужно потратить некоторое время на это. Но если у вас нет времени для создания оригинальных, но главное собственных кнопок, то некоторые альтернативные способы вы можете попробовать. Так как для этого вы можете выбрать один из многих элементов и выставить по умолчанию, но также отредактировать, а это смена оттенка или изменить основной эффект.



При установках кнопки, что идет с оригинальным дизайн, то безусловно сразу смотрится оригинально, где такие веб сайты действительно великолепны, чтобы посещать их не один раз, все же зависит от первого впечатление. Если вам нужно реализовать некоторые красивые и уникальные эффекты зависания кнопок в вашем дизайне, то можно все реализовать.

Так как можно выставить свои собственные эффекты наведения курсора или используете другие эффекты. Вот как раз здесь предоставлено несколько лучших эффектов зависания кнопки css3, где также будут и разнообразные эффекты, которые сделают ваш дизайн красивым и оригинальным, что будет отличиться от других по схожей тематической площадке.

PS - если есть у кого свои идей или красивая кнопка с анимацией, то плиз делимся.
Прикрепления: 1757342.jpg(36.6 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 2018-06-14, 15:48 | Сообщение 16
Онлайн
Администраторы
Сообщений:25131
Награды: 57


Еще одна кнопка с оригинальным эффектом, которое отлично отстроится под любой фон, так как она прозрачная и идет в 2 пикселя, хотя изначально в один шла, но здесь фон темнее нужно делать, чтоб корректно смотрелась. Сам эффект заключается в том, что когда вы наводите на кнопку, то пот правую и левую сторону углы становятся круглыми.



HTML

Код
<div class="lagukismersa milasetub"><span>ZORNET.RU</span></div>


CSS

Код
.lagukismersa{
    line-height: 47px;
    height: 47px;
    text-align: center;
    width: 295px;
    cursor: pointer;
}
.milasetub {
    color: rgba(241, 232, 232);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    border: 2px solid rgba(245, 239, 239, 0.5);
}
.milasetub a{
    color: rgba(51,51,51,1);
    text-decoration: none;
    display: block;
}
.milasetub:hover {
    background-color: rgba(255,255,255,0.2);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;    
}


Демонстрация
Прикрепления: 1544780.jpg(6.9 Kb)
Страна: (RU)
Kosten
Дата: Среда, 2018-07-18, 00:22 | Сообщение 17
Онлайн
Администраторы
Сообщений:25131
Награды: 57


У этих кнопок необычная анимация, что не похоже на другие, так как с первого взгляду видно, хоть и похоже немногго на стандартный эффект. но все же кардинально отличается. Не стал не чего по стилистике добавлять, и оформление делать. так как они так отлично смотрятся.



HTML

Код
<div class="rulopsa">
        <a href="#" class="kadjtusto-saheiga">ZORNET.RU</a>
        <a href="#" class="kadjtusto-saheiga2">ZORNET.RU Button</a>
    </div>


CSS

Код
.rulopsa {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -86px;
    margin-left: -89px;
    text-align: center;
}

a {
    -webkit-transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
    transition: all 200ms cubic-bezier(0.390, 0.500, 0.150, 1.360);
    display: block;
    margin: 14px auto;
    max-width: 175px;
    text-decoration: none;
    border-radius: 5px;
    padding: 21px 25px;
}

a.kadjtusto-saheiga {
    color: rgba(50, 42, 74, 0.66);
    box-shadow: rgba(40, 30, 72, 0.51) 0 0px 0px 2px inset;
}

a.kadjtusto-saheiga:hover {
    color: rgba(241, 238, 238, 0.91);
    box-shadow: rgba(48, 34, 86, 0.78) 0 0px 0px 40px inset;
}

a.kadjtusto-saheiga2 {
    color: rgba(39, 31, 64, 0.68);
    box-shadow: rgba(52, 39, 93, 0.4) 0 0px 0px 2px inset;
}

a.kadjtusto-saheiga2:hover {
    color: rgba(245, 243, 243, 0.85);
    box-shadow: rgba(52, 41, 84, 0.75) 0 80px 0px 2px inset;
}


Демонстрация
Прикрепления: 9623066.png(4.8 Kb)
Страна: (RU)
Kosten
Дата: Среда, 2018-07-18, 00:43 | Сообщение 18
Онлайн
Администраторы
Сообщений:25131
Награды: 57


Кнопка с эффектом нажатие, и также присутствует эффект клика, где можно изменить цвет. Но при нажатие создается анимация, это как продавили кнопку. Видно изначально, что цветовая гамма не сходится и по сути она должна быть светлее, чтоб формат 3D просматривался, так как он по умолчанию идет.



HTML

Код
<button id="acustomizing">ZORNET.RU</button>
<canvas id="texahat-getsown" width="485" height="485"></canvas>


CSS

Код
    #texahat-getsown {
  display: block;
    }

#acustomizing {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    position: absolute;
    font-size: 1.7em;
    text-transform: uppercase;
    padding: 7px 21px;
    left: 50%;
    width: 198px;
    margin-left: -100px;
    top: 50%;
    border-radius: 10px;
    color: #f7f7f7;
    text-shadow: -1px -1px 1px rgba(88, 85, 85, 0.8);
    border: 5px solid transparent;
    border-bottom-color: rgba(72, 68, 68, 0.35);
    background: hsl(233, 46%, 22%);
    cursor: pointer;
    outline: 0 !important;
    animation: pulse 1s infinite alternate;
    transition: background 0.4s, border 0.2s, margin 0.2s;
}
#acustomizing:hover {
    background: hsl(220, 59%, 31%);
    margin-top: -1px;
    animation: none;
    }
    #acustomizing:active {
  border-bottom-width: 0;
  margin-top: 0px;
    }
    @keyframes pulse {
  0% {
   margin-top: 0px;
  }
  100% {
   margin-top: 0px;
  }
    }


Демонстрация
Прикрепления: 0223818.png(6.2 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 2019-11-08, 20:55 | Сообщение 19
Онлайн
Администраторы
Сообщений:25131
Награды: 57


Простые CSS-эффекты наведения кнопок



HTML

Код
<!-- Hover #1 -->
<div class="box-1">
  <div class="btn btn-one">
    <span>HOVER ME</span>
  </div>
</div>

<!-- Hover #2 -->
<div class="box-2">
  <div class="btn btn-two">
    <span>HOVER ME</span>
  </div>
</div>

<!-- Hover #3 -->
<div class="box-3">
  <div class="btn btn-three">
    <span>HOVER ME</span>
  </div>
</div>

CSS

Код
@import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300';

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-family: 'Open Sans Condensed', sans-serif;
}

div[class*=box] {
    height: 33.33%;
    width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-1 { background-color: #FF6766; }
.box-2 { background-color: #3C3C3C; }
.box-3 { background-color: #66A182; }

.btn {
    line-height: 50px;
    height: 50px;
    text-align: center;
    width: 250px;
    cursor: pointer;
}

/*
========================
      BUTTON ONE
========================
*/
.btn-one {
    color: #FFF;
    transition: all 0.3s;
    position: relative;
}
.btn-one span {
    transition: all 0.3s;
}
.btn-one::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: rgba(255,255,255,0.5);
    border-bottom-color: rgba(255,255,255,0.5);
    transform: scale(0.1, 1);
}
.btn-one:hover span {
    letter-spacing: 2px;
}
.btn-one:hover::before {
    opacity: 1;    
    transform: scale(1, 1);    
}
.btn-one::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.3s;
    background-color: rgba(255,255,255,0.1);
}
.btn-one:hover::after {
    opacity: 0;    
    transform: scale(0.1, 1);
}

/*
========================
      BUTTON TWO
========================
*/
.btn-two {
    color: #FFF;
    transition: all 0.5s;
    position: relative;    
}
.btn-two span {
    z-index: 2;    
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;    
}
.btn-two::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.5s;
    border: 1px solid rgba(255,255,255,0.2);
    background-color: rgba(255,255,255,0.1);
}
.btn-two::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.5s;
    border: 1px solid rgba(255,255,255,0.2);
    background-color: rgba(255,255,255,0.1);
}
.btn-two:hover::before {
  transform: rotate(-45deg);
  background-color: rgba(255,255,255,0);
}
.btn-two:hover::after {
  transform: rotate(45deg);
  background-color: rgba(255,255,255,0);
}

/*
========================
      BUTTON THREE
========================
*/
.btn-three {
    color: #FFF;
    transition: all 0.5s;
    position: relative;
}
.btn-three::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(255,255,255,0.1);
    transition: all 0.3s;
}
.btn-three:hover::before {
    opacity: 0 ;
    transform: scale(0.5,0.5);
}
.btn-three::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s;
    border: 1px solid rgba(255,255,255,0.5);
    transform: scale(1.2,1.2);
}
.btn-three:hover::after {
    opacity: 1;
    transform: scale(1,1);
}



See the Pen
Hover Effects 3
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 1937413.png(10.9 Kb) · hover-effects-3.zip(3.8 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 2019-11-08, 22:45 | Сообщение 20
Онлайн
Администраторы
Сообщений:25131
Награды: 57


Эффект наведения ссылки

Прекрасные эффекты, а также забавные вещи, которые мы можем сделать на ссылки, и с картонными коробками. Хотя говорить о картонных коробках было бы очень весело, давайте вместо этого сосредоточим наше внимание на ссылках.

Когда вы наводите курсор на имена, обратите внимание, что происходит. Черный фон выдвигается, чтобы освободить место для белого фона, который скользит внутрь. Когда вы наводите курсор мыши, белый фон отодвигается и возвращает черный фон.



HTML

Код
<div class="wrapper">
  <button class="slide_from_left">Slide From Left</button>
  <button class="slide_from_right">Slide From right</button>
  <button class="slide_from_top">Slide From top</button>
  <button class="slide_from_bottom">Slide From bottom</button>
  <hr>
  <button class="grow_box">Grow Box</button>
  <button class="grow_ellipse">Grow Ellipse</button>
  <button class="grow_skew_forward">Grow Skew Forward</button>
  <button class="grow_skew_backward">Grow Skew Backward</button>
  <button class="grow_spin">Grow Spin</button>
</div>

CSS

Код
button{
  font-size:2rem;
  background:#3498db;
  color:#fff;
  border:0.25rem solid #3498db;
  padding:0.85rem 0.75rem;
  margin:1rem;
  position:relative;
  z-index:1;
  cursor:pointer;
  overflow:hidden;
}

button:hover{
  color:#3498db;
}

button::after{
  content:"";
  background:#ecf0f1;
  position:absolute;
  z-index:-1;
  padding:0.85em 0.75em;
  display:block;
}

button[class^="slide"]{
  transition:all 0.35s;
}
button[class^="slide"]:hover::after{
  left:0;
  right:0;
  top:0;
  bottom:0;
  transition:all 0.35s;
}

button.slide_from_left::after{
  top:0;
  bottom:0;
  left:-100%;
  right:100%;
}

button.slide_from_right::after{
  top:0;
  bottom:0;
  left:100%;
  right:-100%;
}

button.slide_from_top::after{
  top:-100%;
  bottom:100%;
  left:0;
  right:0;
}

button.slide_from_bottom::after{
  top:100%;
  bottom:-100%;
  left:0;
  right:0;
}

button[class^="grow"]::after{
  transition: all 0.3s ease;
}

button[class^="grow"]:hover::after{
  transition: all 0.3s ease-out;
}

button.grow_box::after{
  left:0;
  right:0;
  top:0;
  bottom:0;
  transform:scale(0, 0);
}

button.grow_box:hover::after{
  transform:scale(1,1);
}

button.grow_ellipse::after{
  border-radius:50%;
  left:-50%;
  right:-50%;
  top:-150%;
  bottom:-150%;
  line-height:8.34em;
  transform:scale(0, 0)
}

button.grow_ellipse:hover::after{
  transform:scale(1, 1)
}

button.grow_skew_forward::after{
  left:-20%;
  right:-20%;
  top:0;
  bottom:0;
  transform:skewX(-45deg) scale(0, 1);
}
button.grow_skew_forward:hover::after{
   transform:skewX(-45deg) scale(1, 1);
}

button.grow_skew_backward::after{
  left:-20%;
  right:-20%;
  top:0;
  bottom:0;
  transform:skewX(45deg) scale(0,1);
}

button.grow_skew_backward:hover::after{
   transform:skewX(45deg) scale(1,1);
}

button.grow_spin::after{
  left:0;
  right:0;
  top:0;
  bottom:0;
  transform:scale(0,0) rotate(-180deg);
}

button.grow_spin:hover::after{
  transform:scale(1,1) rotate(0deg);
}



See the Pen
Link Hover Effect (Background)
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 1415460.png(10.4 Kb) · link-hover-effe.zip(3.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Кнопки для сайта с hover эффектом на CSS3 (Создайте уникальные эффекты зависания кнопок при CSS3)
  • Страница 2 из 2
  • «
  • 1
  • 2
Поиск: