Как сделать отдельный класс, чтобы нужные кнопки отмечать?

DocDoc

26 Февраля 2019г.
1
0

Подскажите пожалуйста!

Нашёл в интернете код для кнопки, чтобы она светилась автоматически. Вот только сайт сделан на 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();
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;
}