GetCourse
Дизайн кнопок для GetCourse
Стили кнопок предназначены именно для GetCourse, т. к. CSS опирается на существующие стили платформы и подключенный иконочный шрифт Font Awesome. На другом ресурсе кнопки могут выглядеть по-другому и стили придётся дорабатывать.
Чтобы применить стили к кнопке с тегом <button> или к ссылке <a>, нужно добавить два класса: btn и класс, соответствующий кнопке, например btn-telegram.
Если хотите добавить стили кнопок на странице урока, в настройках кнопки удалите настройки цвета текста и фона, и используйте только второй класс (например, btn-vk, btn-library и т. п.)
CSS-код добавьте в файлы вашей темы. Дополнительно ничего загружать и подключать не нужно.
a.btn-facebook, button.btn-facebook, .btn-facebook > button, .btn-facebook > a,
a.btn-gift, button.btn-gift, .btn-gift > button, .btn-gift > a,
a.btn-instagram, button.btn-instagram, .btn-instagram > button, .btn-instagram > a,
a.btn-library, button.btn-library, .btn-library > button, .btn-library > a,
a.btn-odnoklassniki, button.btn-odnoklassniki, .btn-odnoklassniki > button, .btn-odnoklassniki > a,
a.btn-support, button.btn-support, .btn-support > button, .btn-support > a,
a.btn-telegram, button.btn-telegram, .btn-telegram > button, .btn-telegram > a,
a.btn-vk, button.btn-vk, .btn-vk > button, .btn-vk > a,
a.btn-viber, button.btn-viber, .btn-viber > button, .btn-viber > a,
a.btn-whatsapp, button.btn-whatsapp, .btn-whatsapp > button, .btn-whatsapp > a,
a.btn-youtube, button.btn-youtube, .btn-youtube > button, .btn-youtube > a {
padding: 1rem .75rem;
border: 0;
border-radius: var(--base-btn-radius);
width: 100%;
margin: .5rem 0;
font-size: 1rem;
position: relative;
overflow: hidden;
}
a.btn-facebook, button.btn-facebook, .btn-facebook > button, .btn-facebook > a,
a.btn-facebook:hover, button.btn-facebook:hover, .btn-facebook > button:hover, .btn-facebook > a:hover {
color: #fff;
background: #0865ff !important;
background: linear-gradient(90deg, #3984ff 0%, #0865ff 100%) !important;
}
a.btn-facebook:before, button.btn-facebook:before, .btn-facebook > button:before, .btn-facebook > a:before {
content: "\f09a";
font-family: 'Font Awesome 6 Brands';
font-weight: 400;
display: block;
position: absolute;
left: .75rem;
bottom: -1.5rem;
font-size: 3.5rem;
opacity: .25;
transform: rotate(-15deg);
}
a.btn-gift, button.btn-gift, .btn-gift > button, .btn-gift > a,
a.btn-gift:hover, button.btn-gift:hover, .btn-gift > button:hover, .btn-gift > a:hover {
color: #282828;
background: #f8f8f8 !important;
background: linear-gradient(90deg, #f8f8f8 0%, #e9eae9 100%) !important;
}
a.btn-gift:before, button.btn-gift:before, .btn-gift > button:before, .btn-gift > a:before {
content: "\f06b";
font-family: 'Font Awesome 6 Free';
font-weight: 600;
display: block;
position: absolute;
left: .75rem;
bottom: -1.5rem;
font-size: 3.5rem;
opacity: .15;
transform: rotate(-15deg);
}
a.btn-instagram, button.btn-instagram, .btn-instagram > button, .btn-instagram > a,
a.btn-instagram:hover, button.btn-instagram:hover, .btn-instagram > button:hover, .btn-instagram > a:hover {
color: #fff;
background: rgb(252,212,95) !important;
background: linear-gradient(90deg, rgba(252,212,95,1) 0%, rgba(214,77,98,1) 50%, rgba(140,58,182,1) 100%) !important;
}
a.btn-instagram:before, button.btn-instagram:before, .btn-instagram > button:before, .btn-instagram > a:before {
content: "\f16d";
font-family: 'Font Awesome 6 Brands';
font-weight: 400;
display: block;
position: absolute;
left: .75rem;
bottom: -1.5rem;
font-size: 3.5rem;
opacity: .25;
transform: rotate(-15deg);
}
a.btn-library, button.btn-library, .btn-library > button, .btn-library > a,
a.btn-library:hover, button.btn-library:hover, .btn-library > button:hover, .btn-library > a:hover {
color: #282828;
background: #f8f8f8 !important;
background: linear-gradient(90deg, #f8f8f8 0%, #e9eae9 100%) !important;
}
a.btn-library:before, button.btn-library:before, .btn-library > button:before, .btn-library > a:before {
content: "\f02d";
font-family: 'Font Awesome 6 Free';
font-weight: 600;
display: block;
position: absolute;
left: .75rem;
bottom: -1.5rem;
font-size: 3.5rem;
opacity: .15;
transform: rotate(-15deg);
}
a.btn-odnoklassniki, button.btn-odnoklassniki, .btn-odnoklassniki > button, .btn-odnoklassniki > a,
a.btn-odnoklassniki:hover, button.btn-odnoklassniki:hover, .btn-odnoklassniki > button:hover, .btn-odnoklassniki > a:hover {
color: #fff;
background: #ff7701 !important;
background: linear-gradient(90deg, #ff9234 0%, #ff7701 100%) !important;
}
a.btn-odnoklassniki:before, button.btn-odnoklassniki:before, .btn-odnoklassniki > button:before, .btn-odnoklassniki > a:before {
content: "\f263";
font-family: 'Font Awesome 6 Brands';
font-weight: 400;
display: block;
position: absolute;
left: .75rem;
bottom: -1.5rem;
font-size: 3.5rem;
opacity: .25;
transform: rotate(-15deg);
}
a.btn-support, button.btn-support, .btn-support > button, .btn-support > a,
a.btn-support:hover, button.btn-support:hover, .btn-support > button:hover, .btn-support > a:hover {
color: #282828;
background: #f8f8f8 !important;
background: linear-gradient(90deg, #f8f8f8 0%, #e9eae9 100%) !important;
}
a.btn-support:before, button.btn-support:before, .btn-support > button:before, .btn-support > a:before {
content: "\f1cd";
font-family: 'Font Awesome 6 Free';
font-weight: 600;
display: block;
position: absolute;
left: .75rem;
bottom: -1.5rem;
font-size: 3.5rem;
opacity: .15;
transform: rotate(-15deg);
}
a.btn-telegram, button.btn-telegram, .btn-telegram > button, .btn-telegram > a,
a.btn-telegram:hover, button.btn-telegram:hover, .btn-telegram > button:hover, .btn-telegram > a:hover {
color: #fff;
background: #159cde !important;
background: linear-gradient(90deg, #44b0e5 0%, #159cde 100%)!important;
}
a.btn-telegram:before, button.btn-telegram:before, .btn-telegram > button:before, .btn-telegram > a:before {
content: "\f2c6";
font-family: 'Font Awesome 6 Brands';
font-weight: 400;
display: block;
position: absolute;
left: .75rem;
bottom: -1.5rem;
font-size: 3.5rem;
opacity: .25;
transform: rotate(-15deg);
}
a.btn-vk, button.btn-vk, .btn-vk > button, .btn-vk > a,
a.btn-vk:hover, button.btn-vk:hover, .btn-vk > button:hover, .btn-vk > a:hover {
color: #fff;
background: #0077ff !important;
background: linear-gradient(90deg, #3392ff 0%, #0077ff 100%) !important;
}
a.btn-vk:before, button.btn-vk:before, .btn-vk > button:before, .btn-vk > a:before {
content: "\f189";
font-family: 'Font Awesome 6 Brands';
font-weight: 400;
display: block;
position: absolute;
left: .75rem;
bottom: -1.5rem;
font-size: 3.5rem;
opacity: .25;
transform: rotate(-15deg);
}
a.btn-viber, button.btn-viber, .btn-viber > button, .btn-viber > a,
a.btn-viber:hover, button.btn-viber:hover, .btn-viber > button:hover, .btn-viber > a:hover {
color: #fff;
background: #6348c3 !important;
background: linear-gradient(90deg, #826dcf 0%, #6348c3 100%) !important;
}
a.btn-viber:before, button.btn-viber:before, .btn-viber > button:before, .btn-viber > a:before {
content: "\f409";
font-family: 'Font Awesome 6 Brands';
font-weight: 400;
display: block;
position: absolute;
left: .75rem;
bottom: -1.5rem;
font-size: 3.5rem;
opacity: .25;
transform: rotate(-15deg);
}
a.btn-whatsapp, button.btn-whatsapp, .btn-whatsapp > button, .btn-whatsapp > a,
a.btn-whatsapp:hover, button.btn-whatsapp:hover, .btn-whatsapp > button:hover, .btn-whatsapp > a:hover {
color: #fff;
background: #24d366 !important;
background: linear-gradient(90deg, #50dc85 0%, #24d366 100%) !important;
}
a.btn-whatsapp:before, button.btn-whatsapp:before, .btn-whatsapp > button:before, .btn-whatsapp > a:before {
content: "\f232";
font-family: 'Font Awesome 6 Brands';
font-weight: 400;
display: block;
position: absolute;
left: .75rem;
bottom: -1.5rem;
font-size: 3.5rem;
opacity: .25;
transform: rotate(-15deg);
}
a.btn-youtube, button.btn-youtube, .btn-youtube > button, .btn-youtube > a,
a.btn-youtube:hover, button.btn-youtube:hover, .btn-youtube > button:hover, .btn-youtube > a:hover {
color: #fff;
background: #ff0200 !important;
background: linear-gradient(90deg, #ff3533 0%, #ff0200 100%) !important;
}
a.btn-youtube:before, button.btn-youtube:before, .btn-youtube > button:before, .btn-youtube > a:before {
content: "\f167";
font-family: 'Font Awesome 6 Brands';
font-weight: 400;
display: block;
position: absolute;
left: .75rem;
bottom: -1.5rem;
font-size: 3.5rem;
opacity: .25;
transform: rotate(-15deg);
}* Социальные сети Facebook и Instagram запрещены на территории Российской Федерации
Данный набор стилей входит в мой дизайн-пак для GetCourse.