Стильные кнопки для сайта, которые отлично подойдут под разные функции на портале. Так-как они имеют красивую анимацию при навидениее на основу дизайна. Здесь представлено 2 кнопки, которые выполнены по одной стилистике дизайна.
Но по разным подходам, если на втором варианте мы ключевое слова прописываем в основном коде, то в первой кнопке мы видим, что оно выставлено в прилогающей стилимтике CSS.
HTML
Код
<button type="submit" name="kaanu_mportan" value="2668" class="kaafes_onalsortan button alt">ZORNET.RU-1</button>
<div class="loptrdsa_kimulas">
<a href="" class="adesan_kopulas button alt midsa_kopesed">ZORNET.RU-2</a>
</div>
CSS
Код
.loptrdsa_kimulas,a.adesan_kopulas{text-decoration: none;width:250px;height:50px;background-color:transparent;margin:auto;padding:0;margin-top:2%;border-radius:5px;overflow:hidden;position:relative;cursor:pointer}
.kaafes_onalsortan{cursor:pointer;background-color:transparent;margin:auto;padding:0;align-items:center;justify-content:center;display:flex;width:250px;color:#fff;height:50px;border:0;border-radius:5px;z-index:1;overflow:hidden;position:relative;top:0;transform:scaleX(100%)}
.kaafes_onalsortan:before{transition:.4s ease;content:"ZORNET.RU-1";cursor:pointer;align-items:center;justify-content:center;display:flex;width:250px;height:50px;background-color:#bd9a5b;padding:0;margin-top:0;border-radius:5px;z-index:1;overflow:hidden;position:absolute;top:0;transform:scaleX(100%)}
a.adesan_kopulas{display:flex;justify-content:center;align-items: center;width:100%;margin:auto;height:50px;position:relative;color:#fff;z-index:0;font-weight:600;text-align:center;background-color:#bd9a5b;border-radius:5px;border:none;transition:.4s ease;overflow:hidden}
.kaafes_onalsortan:after{display:flex;justify-content:center;align-items: center;width:250px;margin:auto;height:50px;position:relative;color:#fff;z-index:0;font-weight:600;text-align:center;background-color:#bd9a5b;border-radius:5px;border:none;transition:.4s ease;overflow:hidden}
a.adesan_kopulas:after,.kaafes_onalsortan:after{content: "";width:0;height:50px;z-index:3;overflow:overlay;background-color:#fff;opacity:.2;position:absolute;left:50%;top:0;right:50%;border-bottom:5px solid #fff;transition:.8s ease}
.loptrdsa_kimulas:hover a.adesan_kopulas:after,.kaafes_onalsortan:hover:after{width:100%;height:50px;z-index:3;overflow:overlay;background-color:#fff;opacity:.2;position:absolute;left:0;top:0;right:50%;border-bottom:5px solid #fff;transition:1.5s ease;transition:.6s ease}
.loptrdsa_kimulas:hover a.adesan_kopulas{width:100%;height:50px;color:#fff;font-weight:600;letter-spacing:2px;background-color:#8e8e8e;border-radius:5px;border:none;transition:.3s ease}
.kaafes_onalsortan:hover:before{height:50px;letter-spacing:2px;background-color:#8e8e8e;border:none;transition:.3s ease}
Цветовую гамму подбираем самостоятельно, ведь все настройки происходят в стилях, которые закреплены к основному коду, а точнее классам.
Демонстрация
