Доброго времени суток, друзья. Полистала свой блог и сколько уже постов про разные кнопки в блоге, а вот про варианты оформления этих кнопок, нет ни одного. Вот решила поделиться с вами несколькими примерами, как, использую CSS можно создать красивые и оригинальные кнопочки.
Применить их можно для разных случаев. Например, оформить ссылку в виде кнопки в блоге, сделать кнопку <<скачать>> или <<демонстрация>> и т.д. Вот последнюю я и приведу в качестве примера.
Для наглядной демонстрации и просмотра эффекта кнопок, перейдите на страницу редактора кодов и установите код любой кнопки в его поле. В статье только фото кнопок.
Раскрывающаяся кнопка

<style>
.transform-button {
position: relative;
display: inline-block;
text-decoration: none;
padding: 10px 30px;
margin-right: 20px;
border: 1px solid #68E5F7;
background: transparent;
color: #fff;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
perspective: 500px;
background: white;
transition: .3s;
}
.transform-button:last-of-type {
margin-right: 0;
}
.transform-button span {
position: relative;
z-index: 2;
}
.transform-button:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #556B2F;
transform-origin: left;
transition: .5s;
}
.transform-button:hover {
color: #556B2F;
border-color: #556B2F;
}
.transform-button:hover:before {
transform: rotateY(92deg);
}
</style>
Кнопка с анимацией и эффектом перечёркивания

<a href="###" class="arrow-btn">Демонстрация<span></span></a>
</div>
<style>
.button-wrapper {
max-width: 400px;
margin: 50px auto;
text-align: center;
overflow: hidden;
}
.arrow-btn {
position: relative;
display: inline-block;
padding: 15px 30px;
text-decoration: none;
color: #2fc989;
border: 4px solid #2fc989;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .4em;
transition: .2s;
transition-delay: .1s;
}
.arrow-btn:hover {
color: white;
padding: 15px 35px;
}
.arrow-btn span {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -1;
overflow: hidden;
transition: .35s cubic-bezier(.215, .61, .215, 1);
}
.arrow-btn span:before {
content: "";
position: absolute;
top: -5%;
left: -210%;
width: 200%;
height: 108%;
background: #2fc989;
transform: skew(-15deg, 0);
transition: .5s;
}
.arrow-btn:after {
content: "";
position: absolute;
z-index: -1;
top: 50%;
left: -1000%;
height: 2px;
margin-top: -1px;
width: 400%;
background: #2fc989;
transition: .5s;
}
.arrow-btn:hover:after {
width: 140%;
left: -20%;
}
.arrow-btn:hover span:before {
left: -25%;
}
</style>
Кнопка с анимированной рамкой

<style>
.action-btn {
position: relative;
display: inline-block;
padding: 8px 20px;
margin: 20px;
text-decoration: none;
font-family: 'Comfortaa', cursive;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
color: #112D52;
background: #FF5438;
border: 2px solid #112D52;
transition: .4s linear;
}
.action-btn:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
height: 130%;
width: 91%;
border: 2px solid #112D52;
transform: translate(-50%, -50%);
z-index: -1;
}
.action-btn:hover {
background: #112D52;
color: #FF5438;
}
</style>
Простая анимированная кнопка
.button-1 {
color: #fff;
background: transparent;
border: 2px solid #232323;
position: relative;
font-size: 14px;
letter-spacing: .3em;
font-family: 'Montserrat', sans-serif;
padding: 17px 34px 17px 39px;
transition: .2s ease-in-out;
cursor: pointer;
}
.button-1:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 100%;
height: 100%;
background: #FF5438;
z-index: -1;
transition: .25s ease;
transform: translate(0, 0);
}
.button-1:hover:before {
transform: translate(4px, 4px);
}
</style>
Кнопка с анимацией и радужной рамкой

<style>
.glow-button {
text-decoration: none;
display: inline-block;
padding: 15px 30px;
margin: 10px 20px;
border-radius: 10px;
box-shadow: 0 0 40px 40px #e3a9be inset, 0 0 0 0 #32D4E2;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
letter-spacing: 2px;
color: white;
transition: .15s ease-in-out;
}
.glow-button:hover {
box-shadow: 0 0 10px 0 #32D4E2 inset, 0 0 10px 4px#32D4E2;
color: #F137A6;
</style>
Разнообразие очень украшает картинку. Жаль, не умею применить.
ОтветитьУдалитьСемён, ладно. Пишите новеллы, а мы их читать будем
ОтветитьУдалитьБаннерные кнопки. Пригодится)
ОтветитьУдалитьLight Knight, да, их куда угодно и где угодно можно применить.
Удалитьhttps://cloud.mail.ru/public/QxLJ/2eESxjxMB
ОтветитьУдалить