• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать 3D кнопки с эффектом нажатием CSS (Потрясающая анимированная 3D кнопка на CSS3)
Создать 3D кнопки с эффектом нажатием CSS
Kosten
Дата: Четверг, 2019-04-25, 21:40 | Сообщение 1
Администраторы
Сообщений:21624
Награды: 56


В статье узнаете как можно просто создать потрясающая и также анимированные 3D кнопки с оригинальным эффектом нажатия. Это когда вы наводит клик на созданную кнопку, то происходит эффект, который смотрится оригинально.

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



HTML

Код
<body>
    <div id="gakidesa-kezopubedun">
    
        <div class="dsanyvdesa-catumubedov">
         <div class="dikasdeca-caloputibad">
             <h1>A</h1>
            </div>
        </div>
        
        
        <div class="dsanyvdesa-catumubedov">
         <div class="dikasdeca-caloputibad">
             <h1>B</h1>
            </div>
        </div>
        
        <div class="dsanyvdesa-catumubedov">
         <div class="dikasdeca-caloputibad">
             <h1>C</h1>
            </div>
        </div>
        
    </div>
</body>

CSS

Код
#gakidesa-kezopubedun {
    width: 35em;
    margin: 3em auto;
}

.dsanyvdesa-catumubedov {
    width: 5em;
    height: 5em;
    background-color: #999;
    background-image: linear-gradient(180deg, #CCC, #999);
    border-top: 3px solid #CCC;
    border-right: 3px solid #CCC;
    border-left: 4px solid #666;
    border-bottom: 4px solid #666;
    border-radius: 1em;
    float: left;
    margin: 3em;
    text-decoration: none;
    box-shadow:  -.1em .1em 0 #000,
     -.2em .2em 0 #000,
     -.3em .3em 0 #000,
     -.4em .4em 0 #333,
     -.5em .5em 0 #333,
     -.6em .6em 0 #333,
     -.7em .7em 0 #333,
     -.9em .9em 0 #333,
     -1em 1em 0 #333,
     -1.1em 1.1em 0 #333,
     -1.2em 1.2em 0 #333;
    transition: box-shadow 0.3s,
    border-top 0.3s,
    border-right 0.3s;
}

.dsanyvdesa-catumubedov:hover, .dsanyvdesa-catumubedov:focus {
    box-shadow: .1em -.1em 0 #333,
    .2em -.2em 0 #333,
    -.1em .1em 0 #333,
    -.2em .2em 0 #333,
    -.3em .3em 0 #333,
    inset -.1em -.1em 2em #FFF,
    -.1em -.1em 2em #666;
    border-top: 3px solid #666;
    border-right: 3px solid #666;
}

.dikasdeca-caloputibad {
    width: 4em;
    height: 4em;
    margin: .5em auto;
    border-radius: .8em;
    background-color: #CCC;
    background-image: linear-gradient(45deg, #CCC, #999);
    box-shadow: inset -.15em .15em 0 #666,
    inset .1em -.1em 0 #CCC;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3em;
    color: #F2F2F2;
    text-align: center;
    line-height: 1.3em;
    margin: 0 auto;
    text-shadow: -.01em .01em 0 #5f5b5b,
     -.02em .02em 0 #5f5b5b,
     -.03em .03em 0 #5f5b5b,
     -.04em .04em 0 #5f5b5b,
     -.05em .05em 0 #5f5b5b,
     -.06em .06em 0 #928c8c,
     -.07em .07em 0 #928c8c,
     -.08em .08em 0 #928c8c,
     -.09em .09em 0 #928c8c,
     -.1em .1em 0 #928c8c,
     -.11em .11em 0 #928c8c;
}


Демонстрация
Прикрепления: 3643267.png(14.9 Kb) · 3d-buttons.zip(2.0 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать 3D кнопки с эффектом нажатием CSS (Потрясающая анимированная 3D кнопка на CSS3)
  • Страница 1 из 1
  • 1
Поиск: