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


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

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



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

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

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


Еще одна кнопка с оригинальным эффектом, которое отлично отстроится под любой фон, так как она прозрачная и идет в 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
Администраторы
Сообщений:18741
Награды: 55


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



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
Администраторы
Сообщений:18741
Награды: 55


Кнопка с эффектом нажатие, и также присутствует эффект клика, где можно изменить цвет. Но при нажатие создается анимация, это как продавили кнопку. Видно изначально, что цветовая гамма не сходится и по сути она должна быть светлее, чтоб формат 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)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Кнопки для сайта с hover эффектом на CSS3 (Создайте уникальные эффекты зависания кнопок при CSS3)
  • Страница 2 из 2
  • «
  • 1
  • 2
Поиск: