janelle100 0 Share Posted January 2 (edited) Site URL: http://moodart.co Hi there, I am trying to add a new CSS code to my custom CSS and it is not working... my objective is to create a different colour outline for my button but still have the button be filled with a colour... This is what my Custom CSS looks like right now... .Index-page:first-child .sqs-layout, .Intro .sqs-row { -webkit-animation: fade-text-anim 2s ease; animation: fade-text-anim 2s ease; } @keyframes fade-text-anim { 0% { opacity: 0; -webkit-transform: translate3d(0,30px,0); -moz-transform: translate3d(0,30px,0); -ms-transform: translate3d(0,30px,0); -o-transform: translate3d(0,30px,0); transform: translate3d(0,30px,0); } 25% { opacity: 0; -webkit-transform: translate3d(0,30px,0); -moz-transform: translate3d(0,30px,0); -ms-transform: translate3d(0,30px,0); -o-transform: translate3d(0,30px,0); transform: translate3d(0,30px,0); } 100% { opacity: 1; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } .sps-block-button .sps-block-button-element—medium { background-color: pink; border-radius: 50px; border: 2px solid black; width:75%; } .sps-block-button .sps-block-button-element—small:hover { border: 2px solid black; background-color: white; color: black; } This is what I added but does not work... .sps-block-button .sps-block-button-element—background-colorborder-radius50pxborder2pxsolidblackwidth75%.sps-block-button.sps-block-button-elementhoverborder2pxsolidblackbackground-colorwhitecolorblack Any help would be much appreicated 🙂 Edited January 2 by janelle100 Link to post
Question
janelle100 0
Site URL: http://moodart.co
Hi there,
I am trying to add a new CSS code to my custom CSS and it is not working...
my objective is to create a different colour outline for my button but still have the button be filled with a colour...
This is what my Custom CSS looks like right now...
.Index-page:first-child .sqs-layout, .Intro .sqs-row {
-webkit-animation: fade-text-anim 2s ease;
animation: fade-text-anim 2s ease;
}
@keyframes fade-text-anim {
0% {
opacity: 0;
-webkit-transform: translate3d(0,30px,0);
-moz-transform: translate3d(0,30px,0);
-ms-transform: translate3d(0,30px,0);
-o-transform: translate3d(0,30px,0);
transform: translate3d(0,30px,0);
}
25% {
opacity: 0;
-webkit-transform: translate3d(0,30px,0);
-moz-transform: translate3d(0,30px,0);
-ms-transform: translate3d(0,30px,0);
-o-transform: translate3d(0,30px,0);
transform: translate3d(0,30px,0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
}
.sps-block-button .sps-block-button-element—medium {
background-color: pink;
border-radius: 50px;
border: 2px solid black;
width:75%;
}
.sps-block-button .sps-block-button-element—small:hover {
border: 2px solid black;
background-color: white;
color: black;
}
This is what I added but does not work...
Any help would be much appreicated 🙂
Edited by janelle100Link to post
Top Posters For This Question
1
1
Popular Days
Jan 2
1
Jan 3
1
Top Posters For This Question
janelle100 1 post
tazmeah 1 post
Popular Days
Jan 2 2021
1 post
Jan 3 2021
1 post
1 answer to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment