HTML:
Get Started
<div id="middle"></div>
CSS
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 16px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover{
border: 1px solid #f44336;
background: #f44336;
transition: 1s;
}
I was expecting it to scrroll to my div. But it scrolls and then refreshes the page.
The refresh is due to the <a> link default behavior. Give it the attribute href="#" and to prevent automatic default scroll add return false; on the onclick listener like that:
.hero-btn{
display: inline-block;
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-size: 16px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover{
border: 1px solid #f44336;
background: #f44336;
transition: 1s;
}
Get Started
<div id="middle"></div>
I haven't tested it but it should works
Related
When I'm, including a font-awesome icon, there's this unexpected white background that I can't remove. Any ideas on how to remove it?
HTML Code:
<div class="notifications-window" id="close-notifications">
<div class="notifications-header">
<h4>Notifications</h4>
<button type="button" onclick="closenotifs()"><i class="fas fa-window-close"></i></button>
</div>
<div class="notifications-details">
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
</div>
CSS Code:
.notifications-window {
width: 350px;
border: 3px solid rgb(0, 0, 0);
background-color: rgb(160, 156, 156);
color: #fff;
border-collapse: collapse;
border-radius: 5px;
text-align: center;
list-style-type: none;
display: inline-block;
}
.notifications-window p {
font-size: small;
padding: 5px;
background: rgb(141, 136, 136);
border-radius: 5px;
margin: 5px;
}
.notifications-details {
overflow-y: auto;
max-height: 350px;
}
.fa-window-close {
display: inline-block;
float: right;
justify-content: right;
cursor: pointer;
text-decoration: none;
text-align: center;
color: #000;
background-color: #fff;
border: none;
outline: none;
transition: background 250ms ease-in-out,
transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
I'm attaching an image of how the icon looks like after styling
https://i.stack.imgur.com/bfBW6.png
The background of the button is added by User Agent Stylesheet. You can explore more about user agent stylesheet here.
However you can remove the background of the button by writing your own styles.
For this I wrote a .button class for button and also removed background-color: #fff; from your .fa-window-close class. Try this out;
CSS:
.notifications-window {
width: 350px;
border: 3px solid rgb(0, 0, 0);
background-color: rgb(160, 156, 156);
color: #fff;
border-collapse: collapse;
border-radius: 5px;
text-align: center;
list-style-type: none;
display: inline-block;
}
.notifications-window p {
font-size: small;
padding: 5px;
background: rgb(141, 136, 136);
border-radius: 5px;
margin: 5px;
}
.notifications-details {
overflow-y: auto;
max-height: 350px;
}
.fa-window-close {
display: inline-block;
float: right;
justify-content: right;
cursor: pointer;
text-decoration: none;
text-align: center;
color: #000;
/*background-color: #fff;*/
border: none;
outline: none;
transition: background 250ms ease-in-out, transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
.button {
background: transparent;
border: none;
}
HTML:
<div class="notifications-window" id="close-notifications">
<div class="notifications-header">
<h4>Notifications</h4>
<button type="button" onclick="closenotifs()" class="button"><i class="fas fa-window-close"></i></button>
</div>
<div class="notifications-details">
<p>Congratulations! Login Reward: 2 credits</p>
<p>Congratulations! Login Reward: 2 credits</p>
</div>
</div>
I am a little confused:
In the picture, the element that says "Navigation einblenden" is span button, while the one with "Suche" is a span a. I have styled them exactly the same:
part of the css, dispOpts is the class-name of the parent span. and the all:none is for testing.
.dispOpts {
all:none;
}
.dispOpts button {
all:none;
background: var(--main-color);
color: white;
border: 1px solid white;
padding: 0.4em;
transition-duration: 0.5s;
margin-left: 0.4em;
margin-bottom:2em;
}
.dispOpts a {
all:none;
background: var(--main-color);
color: white;
border: 1px solid white;
padding: 0.4em;
transition-duration: 0.5s;
margin-left: 0.4em;
}
.dispOpts::before,
.dispOpts::after {
display: none;
}
.dispOpts a:hover,
.dispOpts button:hover{
background: var(--accent-color);
color: white;
}
I cannot find any difference at all...
It is our workbench for a project at work:
http://exist3.ulb.tu-darmstadt.de:8080/exist/apps/edoc/view.html?id=e000001_kuttenberger_religionsfrieden_einleitung
As you can see in your code, you didn't style them the same.
The .dispOpts a is missing margin-bottom:2em; and also to work the same as on button, you have to add also display: inline-block on .dispOpts a, and also to be same, they need to have same line-height and font-size, so result would be like this:
.dispOpts button {
all:none;
background: var(--main-color);
color: white;
border: 1px solid white;
padding: 0.4em;
transition-duration: 0.5s;
margin-left: 0.4em;
margin-bottom:2em;
line-height: 1.4;
font-size: 14px;
}
.dispOpts a {
all:none;
background: var(--main-color);
color: white;
border: 1px solid white;
padding: 0.4em;
transition-duration: 0.5s;
margin-left: 0.4em;
margin-bottom: 2em;
display: inline-block;
line-height: 1.4;
font-size: 14px;
}
And all would be lined correctly with same height.
Also you could use it with all: initial; and the end result would be:
.dispOpts button {
all:initial;
background: var(--main-color);
color: white;
border: 1px solid white;
padding: 0.4em;
transition-duration: 0.5s;
margin-left: 0.4em;
margin-bottom:2em;
}
.dispOpts a {
all:initial;
background: var(--main-color);
color: white;
border: 1px solid white;
padding: 0.4em;
transition-duration: 0.5s;
margin-left: 0.4em;
margin-bottom: 2em;
display: inline-block;
}
With this way, you would need only margin-bottom, and display on a element.
Both link didn't have the same styles :
I have these hover effects set up and it doesn't seem to be changing a thing. I can't figure out why.
Same thing happens with the primary button at the bottom.
body { background-color: #aaa }
.button {
background: #fff;
border-radius: 5px;
border: none;
padding: 5px;
width: 100px;
height: 50px;
}
.button:hover {
background: #1c1c1c;
color: #fff;
transition: 0.3s ease;
cursor: pointer;
}
.button-primary {
background: yellow;
border-radius: 5px;
border: none;
padding: 5px;
width: 100px;
height: 50px;
margin-bottom: 10px;
}
.button-primary:hover {
background: #1c1c1c;
transition: 0.3s ease;
}
.button-down {
height: 70px;
width: 70px;
border-radius: 50%;
border: 1px solid white;
background: transparent;
color: white;
}
.button-down:hover {
background: white;
color: #1c1c1c;
border: 1px solid #1c1c1c;
cursor: pointer;
}
<div>
<div class="down">
<button class='button-down'><i class='fas fa-arrow-down'></i></button>
</div>
<input type="text" name='email' id='email' placeholder='signup to our newsletter...'>
<br>
<button class='button-primary' type='submit' name='submit'>Submit</button>
</div>
You linked your stylesheet to your html?
Also, .button-down class in is not declared in css but instead you have .button
Replace .button with .button-down and try again.
.button-down{
background: #fff;
border-radius: 5px;
border: none;
padding: 5px;
width: 100px;
height: 50px;
}
.button-down:hover{
background: #1c1c1c;
color: #fff;
transition: 0.3s ease;
cursor: pointer;
}
Well I have recently made a website for local veterinarian and everything worked out fine except this one anchor tag that for some reason is not working on Firefox, but works fine on Chrome. I cant seem to find the reason why..
Link to Website https://www.petvetbihac.com/
<section id="home">
<div class="home">
<div class="home__content">
<img src="assets/img/logo/logo.png" class="home__content--logo img-fluid" alt="logo">
<div class="title__underline"></div>
<p class="home__content--text">Samostalna veterinarska praksa u Bihaću</p>
Više O nama
</div>
CSS FOR ANCHOR TAG:
.customBtn {
font-size: 1.8rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
color: $color-white;
background: $color-secondary;
display: inline-block;
padding: .5rem 1rem;
border: 2px solid $color-secondary;
border-radius: 3px;
transition: all .3s ease-in-out;
cursor: pointer;
#media only screen and (max-width:$bp-small-3) {
font-size: 1.7rem;
}
&:hover {
text-decoration: none;
background: $color-primary;
border: 2px solid $color-primary;
color: $color-white;
cursor: pointer;
}
&__footer {
font-size: 1.4rem;
background: white;
color: $color-primary;
border: 2px solid $color-primary;
#media only screen and (max-width:$bp-small-3) {
padding: .2rem .5rem;
}
&:hover {
background: $color-secondary;
color: white;
border: 2px solid $color-secondary;
}
}
&__home {
animation-name: moveInBottom;
animation-duration: 1s;
animation-timing-function: ease-out;
}
&__work {
background: $color-secondary;
color: $color-white;
height: 4rem;
&:hover {
background: $color-primary-dark;
color: $color-white !important;
border: 2px solid $color-primary-dark;
}
}
}
No error messages.
If you raise z-index of that button, it seems working in Firefox.
How can I make the color of the text turn to black not only when I move the mouse cursor to the text, but also when the cursor enters the whole button area?
.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
transition: 0.35s;
}
.button a, active {
text-decoration: none;
color: #e7dd84;
}
.button a:hover {
text-decoration: none;
color: black;
}
.button:hover {
color: black;
background-color: white;
border-color: white;
transition: 0.35s;
}
<div class="button">
Go to site
</div>
Do you mean like this?
.button
{
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236,229,167,0.2);
transition: 0.35s;
}
.button a, active
{
text-decoration: none;
color: #e7dd84;
}
.button:hover a
{
text-decoration: none;
color: black;
}
.button:hover
{
color: black;
background-color: white;
border-color: white;
transition: 0.35s;
}
<div class="button">
Go to site
</div>
Instead of styling the <div>, I suggest to do it on the <a> tag directly.
I would use inline block, so that you don't need to specify the width, as inline block has the ability of shrink-to-fit based on length of the text. And on the container all you need is text-align:center to center that button horizontally.
Hover on the edges of the button you'll see the link also becomes available, because we set padding on it directly. Unless your original demo, you'll have to hover on the text to be able to click. This small improvement makes it more accessible, less confusing.
I also moved the class button onto the <a>, and add container to the <div>.
jsfiddle
.container {
text-align: center;
}
.button {
text-decoration: none;
background-color: rgba(236, 229, 167, 0.2);
border: 2px solid #e7dd84;
color: #e7dd84;
display: inline-block;
font-size: 1.5em;
padding: 8px;
transition: 0.35s;
}
.button:hover {
text-decoration: none;
background-color: white;
border-color: white;
color: black;
}
<div class="container">
<a class="button" href="first.html">Go to site</a>
</div>
You have to give the color change to the link when you hover on the button.
Currently you have given the color to change when hoverd on the link inside the button.
Check updated snippet.
.button
{
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236,229,167,0.2);
transition: 0.35s;
}
.button a, active
{
text-decoration: none;
color: #e7dd84;
}
.button:hover a
{
text-decoration: none;
color: black;
}
.button:hover
{
color: black;
background-color: white;
border-color: white;
transition: 0.35s;
}
<div class="button">
Go to site
</div>