Skip to content
Snippets Groups Projects
Commit 6d721f9f authored by Jonathan Sjöberg's avatar Jonathan Sjöberg
Browse files

added properly working hover efffects on the top- and bottom buttons :)

parent 64d3fe47
No related branches found
No related tags found
4 merge requests!139The members of the project should be showing now in pgsa pages, but there are...,!134The members of the project should be showing now in pgsa pages, but there are...,!110added properly working hover efffects on the top- and bottom buttons :),!107Added autofill from database into text boxes, but now data is taken from wrong...
This commit is part of merge request !107. Comments created here will be created in the context of that merge request.
......@@ -4,9 +4,9 @@
}
.maincontent-header{
background-color: #f0f0f0; /* Light gray background color */
border: 1px solid #ccc; /* Light border color */
border-radius: 8px; /* Rounded corners */
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 8px;
}
.top-buttons{
......@@ -16,27 +16,59 @@
}
.button-kunskapsbanken{
font-size: x-large !important;
font-family: 'Roboto',sans-serif;
font-weight: bold;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
.button-kunskapsbanken {
position: relative;
font-size: 1.7vw !important;
font-family: 'Roboto', sans-serif;
font-weight: bold;
text-align: center;
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
border-radius: 8px;
border-style: none;
height: 13rem;
width: 22rem;
transition: ease .5s;
user-select: none;
overflow: hidden;
}
border-radius: 8px;
border-style: none;
.button-kunskapsbanken::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
opacity: 0;
transition: opacity 0.3s ease;
}
height: 13rem;
width: 22rem;
transition: ease .5s;
user-select: none;
/* Add shadow only on small screens */
@media screen and (max-width: 980px) {
.button-kunskapsbanken:hover::before {
opacity: 1;
}
.button-kunskapsbanken{
margin: 5px;
}
}
/* Add resizing effect on large screens */
@media screen and (min-width: 981px) {
.button-kunskapsbanken:hover {
transform: scale(1.1);
}
.button-kunskapsbanken:hover{
transform: scale(1.3);
.button-kunskapsbanken:hover::before {
opacity: 0.7;
}
}
#buttons-kunskapsbanken-button1{
background-image: linear-gradient(#c29ffa, #dfcdfa);
color:white;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment