Кнопки для сайта с hover эффектом на CSS3 - Страница 2 - Форум

Новые сообщения
Участники
Правила форума
Поиск
RSS

Страница 2 из 3
«
1
2
3
»

Форум » Web-Раздел » Начинающему вебмастеру » Кнопки для сайта с hover эффектом на CSS3 (Создайте уникальные эффекты зависания кнопок при CSS3)

Кнопки для сайта с hover эффектом на CSS3

Kosten

Воскресенье, 27 Мая 2018 | Сообщение 1

Администраторы

Сообщений:44356

Награды: 70

« 555 »

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

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

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

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

PS - если есть у кого свои идей или красивая кнопка с анимацией, то плиз делимся.

Прикрепления: 1757342.jpg (36.6 Kb)

Страна: (RU)

Kosten

Четверг, 14 Июня 2018 | Сообщение 16

Администраторы

Сообщений:44356

Награды: 70

« 555 »

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

Среда, 18 Июля 2018 | Сообщение 17

Администраторы

Сообщений:44356

Награды: 70

« 555 »

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

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

Среда, 18 Июля 2018 | Сообщение 18

Администраторы

Сообщений:44356

Награды: 70

« 555 »

Кнопка с эффектом нажатие, и также присутствует эффект клика, где можно изменить цвет. Но при нажатие создается анимация, это как продавили кнопку. Видно изначально, что цветовая гамма не сходится и по сути она должна быть светлее, чтоб формат 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

Пятница, 08 Ноября 2019 | Сообщение 19

Администраторы

Сообщений:44356

Награды: 70

« 555 »

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

HTML

Код

<div class="box-1">
  <div class="btn btn-one">
    <span>HOVER ME</span>
  </div>
</div>


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


<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

Пятница, 08 Ноября 2019 | Сообщение 20

Администраторы

Сообщений:44356

Награды: 70

« 555 »

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

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

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

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)

Kosten

Четверг, 27 Февраля 2020 | Сообщение 21

Администраторы

Сообщений:44356

Награды: 70

« 555 »

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

See the Pen
Nav Menu Design by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Воскресенье, 31 Мая 2020 | Сообщение 22

Администраторы

Сообщений:44356

Награды: 70

« 555 »

Красивый дизайн кнопок на чистом CSS

See the Pen
Button colours by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Понедельник, 22 Июня 2020 | Сообщение 23

Администраторы

Сообщений:44356

Награды: 70

« 555 »

Интересное решение анимации для кнопки при помощи CSS

See the Pen
SVG Animation by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Среда, 24 Июня 2020 | Сообщение 24

Администраторы

Сообщений:44356

Награды: 70

« 555 »

Оригинальные эффекты для кнопок на чистом CSS

HTML

Код

<div class="container">
  <a href="/" class="button horizontal">Horizontal</a>
</div>
<div class="container">
  <a href="/" class="button vertical">Vertical</a>
</div>
<div class="container">
  <a href="/" class="button fill">Fill</a>
</div>
<div class="container">
  <a href="/" class="button shrink">Shrink</a>
</div>
<div class="container">
  <a href="/" class="button elipse">Ellipse</a>
</div>
<div class="container">
  <a href="/" class="button affirmation"></a>
</div>

CSS

Код

@import url(https://fonts.googleapis.com/css?family=Averia+Sans+Libre);
body {
  background: #000;
  text-align: center;
  font-family: 'Averia Sans Libre', cursive;
  font-size: 25px;
  font-weight: bold;
}

h1 {
  color: grey;
}

.container {
  margin-top: 1em;
  width: 100%;
}

.button {
  position: relative;
  margin: 0 auto;
  display: block;
  width: 202px;
  color: #000;
  overflow: hidden;
  text-decoration: none;
  background: #f9c126;
  padding: 20px 40px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0 #d59e06;
  -webkit-box-shadow: inset 0 0 0 0px #d59e06;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.button.horizontal:hover {
  box-shadow: inset 350px 0 0 0 #d59e06;
  -webkit-box-shadow: inset 350px 0 0 0 #d59e06;
  color: #fff;
}
.button.vertical:hover {
  box-shadow: inset 0 250px 0 0 #d59e06;
  -webkit-box-shadow: inset 0 250px 0 0 #d59e06;
  color: #fff;
}
.button.fill:hover {
  box-shadow: inset 0 0 0 100px #d59e06;
  -webkit-box-shadow: inset 0 0 0 45px #d59e06;
  color: #fff;
}
.button.shrink:hover {
  width: 102px;
  padding: 10px 40px;
  color: #fff;
  background: #d59e06;
}
.button.elipse:hover {
  border-radius: 100%;
  width: 100px;
  background: #d59e06;
  color: #fff;
}
.button.affirmation:before {
  content: "Affirmation";
}
.button.affirmation:hover {
  background: #bd0855;
}
.button.affirmation:hover:before {
  content: "People like me.";
  color: #fff;
}

See the Pen
Buttons hover effect CSS by Kocsten (@kocsten)
on CodePen.

Страна: (RU)

Kosten

Среда, 24 Июня 2020 | Сообщение 25

Администраторы

Сообщений:44356

Награды: 70

« 555 »

Кнопка с красивым градиентом, где присутствует оригинальный эффект при наведение клика. Также она выполнена на чистом CSS3, что вся функциональность анимации выглядит красиво.

1. По умолчанию:

2. При наведении:

HTML

Код

CSS

Код

.krastochnaya-knopka {
    display: flex;
    align-items: center;
    justify-content: center;
}

body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    background-image: linear-gradient(147deg, #000000 0%, #434343 74%);
}

.stilistika {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button {
    width: 160px;
    height: 52px;
    cursor: pointer;
    border: none;
    border-radius: 25px;
    background-color: #38c3c2;
    background-image: linear-gradient(316deg, #3dc3c2 0%, #b83db9 74%);
    transition: 500ms;
}

button::after {
    width: 154px;
    height: 45px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    content: 'ZORNET.RU';
    font-size: 20px;
    color: #f3ecec;
    border-radius: 25px;
    background-color: #1f1d1d;
    transition: 500ms;
}

button:hover::after {
    font-size: 25px;
    background-color: transparent;
}

button:hover {
    transform: scale(0.9);
}

button:focus {
    outline: none;
}

Установка завершена

Демонстрация

Прикрепления: 6371301.png (4.7 Kb) · 4032034.png (8.6 Kb) · gradient-border.zip (2.8 Kb)

Страна: (RU)

Kosten

Понедельник, 15 Февраля 2021 | Сообщение 26

Администраторы

Сообщений:44356

Награды: 70

« 555 »

Кнопка с градиентом, которая украсит многий дизайн, ведь по умолчанию в ней прописан красивый эффект при наведении.

HTML

Код

<button class="aslope-detumas">ZORNET.RU</button>

CSS

Код

.aslope-detumas {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button {
    width: 150px;
    height: 50px;
    cursor: pointer;
    border: none;
    color: white;
    background-color: #1fd1f9;
    background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
    transition: 500ms;
    position: relative;
}

button:before, button:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 75px;
    height: 0px;
    background: transparent;
    transition: 500ms;
}

button:before {
    transform: translateX(-50px) translateY(27px);
  box-shadow: 5px 5px 16px #ca61ff;
}

button:after {
    transform: translateX(-25px) translateY(27px);
    box-shadow: -5px 5px 16px #1fd1f9;
}

button:hover:before, button:hover:after {
    height: 5px;
}

button:hover {
    box-shadow: inset 0px 5px 10px rgba(255,255,255,0.4);
}

button:focus {
    outline: none;
}

На этом все!

See the Pen
Glowing by Kocsten (@kocsten)
on CodePen.

Прикрепления: 4182807.png (7.6 Kb) · glowing.zip (2.9 Kb)

Страна: (RU)

Kosten

Понедельник, 15 Февраля 2021 | Сообщение 27

Администраторы

Сообщений:44356

Награды: 70

« 555 »

Кнопка с оригинальной анимацией для сайта или блога.

HTML

Код

CSS

Код

.ANULAS-CSAM{
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button {
    width: 150px;
    height: 50px;
    cursor: pointer;
    border: none;
    background-color: #6247aa;
    background-image: linear-gradient(316deg, #6247aa 0%, #a594f9 74%);
    display: flex;
    align-items: center;
    justify-content: center;
}

button:before {
    width: 140px;
    height: 40px;
    content: '';
    background-color: #cdc1ff;
    background-image: linear-gradient(316deg, #cdc1ff 0%, #e5d9f2 74%);
}

button:after {
    content: 'ZorNet.Ru';
    position: absolute;
    color: #6247aa;
}

button:hover:before {
    animation: animate 1s forwards;
}

@keyframes animate {
    33%{width: 150px;
    height: 20px;}
    66%{width: 0px;
    height: 20px;}
    100%{width: 150px;
    height:50px;}
}

button:focus {
    outline: none;
}

Установка завершена!

See the Pen
purple by Kocsten (@kocsten)
on CodePen.

Прикрепления: 7375027.png (7.3 Kb) · purple.zip (2.8 Kb)

Страна: (RU)

Kosten

Понедельник, 15 Февраля 2021 | Сообщение 28

Администраторы

Сообщений:44356

Награды: 70

« 555 »

Кнопка с мигающим элементом, что можно задействовать на сайте для привлечения внимания.

HTML

CSS

Код

.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    color: #bbb;
    transition: 500ms;
}

button svg {
    width: 16px;
    transform: translateY(6px);
    margin-right: 5px;
    fill: #bbb;
    transition: 500ms;
}

button:focus {
    color: white;
}

button:focus svg {
    fill: red;
    animation: blink 2s infinite;
}

button:focus {
    outline: none;
}

@keyframes blink {
    50% {fill: pink;}
}

Установка завершена!

See the Pen
LIVE CSS by Kocsten (@kocsten)
on CodePen.

Прикрепления: 5318165.png (6.8 Kb) · live.zip (2.8 Kb)

Страна: (RU)

Kosten

Понедельник, 15 Февраля 2021 | Сообщение 29

Администраторы

Сообщений:44356

Награды: 70

« 555 »

Кнопка, которая идет с растягиванием знаков, где имеет несколько оттенков и красивую анимацию.

HTML

Код

CSS

Код

.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button {
    width: 250px;
    height: 30px;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    background: transparent;
    background-image: linear-gradient(70deg,#0ebeff,#ffdd40,#ae63e4,#47cf73);
    background-size: 100% 10%;
    background-position: bottom;
    background-repeat: no-repeat;
}

button:before {
    content: 'CREATE';
    color: #ccc;
    transition: 1s;
}

button:hover:before {
    transform: scale(2) translateX(33%);
    letter-spacing: 10px;
    background: -webkit-linear-gradient(70deg,#0ebeff,#ffdd40,#ae63e4,#47cf73);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

button:focus {
    outline: none;
}

На этом все!

See the Pen
imitation css by Kocsten (@kocsten)
on CodePen.