sugoidogo/twitch-subathon-countdown
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Styling for Buttons

Browse Source
This commit is contained in:
John
2022-05-02 14:31:32 -04:00
committed by GitHub
parent 11c50bd713
commit 8ad90d1e60
1 changed files with 86 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+86
View File
@@ -43,6 +43,19 @@ body {
border-radius: 30px; border-radius: 30px;
} }
#startPage {
position: absolute;
align-items: center;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
/*background-color: var(--background-color);*/
width: 150px;
height: 50px;
border-radius: 30px;
background:none;
}
#textDiv { #textDiv {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -50,6 +63,79 @@ body {
height: 100%; height: 100%;
} }
.button {
border-radius: 30px;
box-shadow: 0 0 1.25rem 0.5rem var(--shadow-color);
justify-content: center;
align-items: center;
display: flex;
height: 100%;
width: 150px;
height: 50px;
top: 50%;
left: 50%;
color:white;
/*background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #0074cc, #a700cc);*/
background:none;
}
#firstButtonDiv, #secondButtonDiv {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #0074cc, #a700cc);
width: 150px;
height: 50px;
display: inline-block;
}
#firstButtonDiv:hover, #secondButtonDiv:hover {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #0061ac, #8e00ad)!important;
}
#firstButtonDiv, #secondButtonDiv {
border-radius: 30px;
justify-content: center;
align-items: center;
display: flex;
height: 100%;
width: 150px;
height: 50px;
top: 50%;
left: 50%;
color:white;
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #0074cc, #a700cc);
}
#secondButtonDiv {
margin-top:10px;
}
p { p {
color: var(--text-color); color: var(--text-color);
font-size: 5.8rem; font-size: 5.8rem;