Подскажите пожалуйста! Нашёл в интернете код для кнопки, чтобы она светилась автоматически. Вот только сайт сделан на OpenCart CMS. Поэтому код не

подходит, так как общие классы есть. Как сделать отдельный класс, чтобы нужные кнопки отмечать? Заранее спасибо всем!

Код прилагаю.

@mixin fade-transition($element) {
-webkit-transition: $element 0.15s ease-in-out;
-moz-transition: $element 0.15s ease-in-out;
-ms-transition: $element 0.15s ease-in-out;
-o-transition: $element 0.15s ease-in-out;
transition: $element 0.15s ease-in-out;
}

body {
background: grey;
font-family: «Arial»;
background-image: url(https://24.media.tumblr.com/abbd3d80c95a8e2b7576246b12a9f671/tumblr_n0fwypACUa1slhhf0o1_1280.jpg);
background-size: cover;
}

a {

/* styling */
display: inline-block;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 5px;
color: #FAFAFA;
border: 3px solid #FAFAFA;
padding: 25px;

/* centering */
position: absolute;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
background: rgba(0,0,0,0.5);
@include fade-transition(background);

&:hover {
background: rgba(8,97,76,0.6);
}
}


i {
/* positioning */
position: absolute;
opacity: 0;
top: 0;
left: 0;

/* gradient */
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 1%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.85) 70%, rgba(255,255,255,0.85) 71%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0.03)), color-stop(30%,rgba(255,255,255,0.85)), color-stop(50%,rgba(255,255,255,0.85)), color-stop(70%,rgba(255,255,255,0.85)), color-stop(71%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */

/* forming the shine element
play around with the width, skew and gradient to get different effects
*/
width: 15%;
height: 100%;
transform: skew(-10deg,0deg);
-webkit-transform: skew(-10deg,0deg);
-moz-transform: skew(-10deg,0deg);
-ms-transform: skew(-10deg,0deg);
-o-transform: skew(-10deg,0deg);

/* animating it */
animation: move 2s;
animation-iteration-count: infinite;
animation-delay: 1s;
-webkit-animation: move 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
-moz-transform: skew(-10deg,0deg);
-moz-animation: move 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 1s;
-ms-transform: skew(-10deg,0deg);
-ms-animation: move 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-delay: 1s;
-o-transform: skew(-10deg,0deg);
-o-animation: move 2s;
-o-animation-iteration-count: infinite;
-o-animation-delay: 1s;
}

/* */
@keyframes move {
0% { left: 0; opacity: 0; }
5% {opacity: 0.0}
48% {opacity: 0.2}
80% {opacity: 0.0}
100% { left: 82%}
}

@-webkit-keyframes move {
0% { left: 0; opacity: 0; }
5% {opacity: 0.0}
48% {opacity: 0.2}
80% {opacity: 0.0}
100% { left: 82%}
}

@-moz-keyframes move {
0% { left: 0; opacity: 0; }
5% {opacity: 0.0}
48% {opacity: 0.2}
80% {opacity: 0.0}
100% { left: 88%}
}

@-ms-keyframes move {
0% { left: 0; opacity: 0; }
5% {opacity: 0.0}
48% {opacity: 0.2}
80% {opacity: 0.0}
100% { left: 82%}
}

@-o-keyframes move {
0% { left: 0; opacity: 0; }
5% {opacity: 0.0}
48% {opacity: 0.2}
80% {opacity: 0.0}
100% { left: 82%}
}
Ответов пока нет
Рекомендуем личную консультацию

Виталий

C++, C#, PHP, Java, JavaScript, web-разработка, мобильные приложения. Дорого, профессионально и качественно. На вопросы про проблемы с играми, железом и настройкой системы не отвечаю! На сайте постоянно не сижу, поэтому сразу могу не ответить.
Посмотреть всех экспертов из раздела Технологии > JavaScript,Ajax,HTML
Пользуйтесь нашим приложением Доступно на Google Play Загрузите в App Store