I am adding buttons to my project and am having difficulty figuring out why the background around the svg is showing both the background of the button and the page's background in a square around the svg.
Any idea what how to fix my scss/css? The code sandbox is here.
* {
background: lightcoral;
}
button {
background-color: lightblue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 25px;
outline: none;
margin: 2rem;
transition: 0.3s ease-in-out;
cursor: pointer;
&:hover {
background: blue;
}
}
//Home button behavior is here
.home-button {
margin: 1rem;
border: none;
outline: none;
}
.home-pic {
border: none;
width: 2.5rem;
}
Here is how you fix it:
* {
background: lightcoral;
}
button {
background-color: lightblue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 25px;
outline: none;
margin: 2rem;
transition: 0.3s ease-in-out;
cursor: pointer;
&:hover {
background: blue;
// apply hover effect to the home button
.home-pic{
background: blue;
}
}
}
//Home button behavior is here
.home-button {
// do you really need these styles?
// margin: 1rem;
// border: none;
// outline: none;
}
.home-pic {
border: none;
// I added these styles
width: 1.1rem;
transition: 0.3s ease-in-out;
background-color: lightblue;
}
Related
I want to create a profile icon which will used as dropdown. I tried this:
App.js
export default function App() {
return <button className="profile">Profile</button>;
}
styles
.profile {
padding: 8px 20px;
border-radius: 4px;
outline: none;
border: none;
font-size: 18px;
color: #fff;
cursor: pointer;
background-color: #1888ff;
}
.profile:hover {
padding: 6px 18px;
transition: all 0.3s ease-out;
background-color: transparent;
color: #fff;
border-radius: 4px;
border: 2px solid #1888ff;
transition: all 0.3s ease-out;
}
Do you know how I can make the button as a circle with dropdown?
https://codesandbox.io/s/epic-shamir-osu68
Add bellow css selectors to profile button:
.profile {
display: flex;
justify-content: center;
align-items: center;
border-radius: 100px;
width: 50px;
height: 50px;
}
My CSS style for the range slider doesn't work on Edge. How can I fix the Problem?
I searched on the web for a solution. And added some codes but still not working.
.slider {
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #33A2D9;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: #33A2D9;
cursor: pointer;
}
/*I added this to fix for edge but it doesn't work */
input[type=range]::-ms-thumb{
width: 15px !important;
height: 15px !important;
border-radius: 50% !important;
background: #33A2D9 !important;
cursor: pointer !important;;
}
input[type=range]::-ms-fill-upper {
border-radius: 5px !important;
background: #d3d3d3 !important;
}
input[type=range]::-ms-fill-lower {
border-radius: 5px !important;
background: #d3d3d3 !important;
}
What it should look like (for example on Firefox):
What it look like on edge:
Your "mistake" (if we can call it that) was giving the input a background. You want to give it background-color of transparent and give the -track the desired shade.
Also, as a minor side note and general rule, avoid using background instead of background-color. It is shorter, but it sets a bunch of other background- properties, which you normally don't care about but are a source of common bugs.
Since it tends to be repetitive, I wrote it in SCSS:
$input-height: 16px;
$track-height: 6px;
$thumb-bg: #33A2D9;
$track-bg: #d3d3d3;
#mixin slider-thumb {
width: $input-height;
height: $input-height;
border-radius: $input-height/2;
background-color: $thumb-bg;
appearance: none;
}
#mixin slider-track {
height: $track-height;
border-radius: $track-height/2;
background-color: $track-bg;
appearance: none;
}
.slider[type=range] {
-webkit-transition: .2s;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: $input-height;
background-color: transparent;
outline: none;
opacity: 0.7;
transition: opacity .2s;
cursor: pointer;
&:hover, &:focus, &:active {
opacity: 1;
}
&::-webkit-slider- {
&runnable-track {
-webkit-appearance: none;
#include slider-track;
}
&thumb {
-webkit-appearance: none;
#include slider-thumb;
margin-top: -($input-height - $track-height)/2;
}
}
&::-moz-range- {
&track {
#include slider-track;
}
&thumb {
#include slider-thumb;
margin-top: 0;
}
}
&::-ms- {
&track {
#include slider-track;
}
&fill-upper {
#include slider-track;
}
&fill-lower {
#include slider-track;
}
&thumb {
#include slider-thumb;
margin-top: 0;
}
}
}
Resulting in the following CSS:
.slider[type=range] {
-webkit-appearance: none;
-webkit-transition: .2s;
width: 100%;
height: 16px;
border-radius: 3px;
background-color: transparent;
outline: none;
opacity: 0.7;
transition: opacity .2s;
cursor: pointer;
}
.slider[type=range]:hover, .slider[type=range]:focus, .slider[type=range]:active {
opacity: 1;
}
.slider[type=range]::-webkit-slider-runnable-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-webkit-slider-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
-webkit-appearance: none;
appearance: none;
margin-top: -5px;
}
.slider[type=range]::-moz-range-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
margin-top: 0;
}
.slider[type=range]::-ms-track {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-fill-upper {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-fill-lower {
height: 6px;
border-radius: 3px;
background-color: #d3d3d3;
}
.slider[type=range]::-ms-thumb {
width: 16px;
height: 16px;
border-radius: 8px;
background-color: #33A2D9;
margin-top: 0;
}
<input type=range class=slider>
Playground here.
Im coding a blog and trying to make "Read More" button at the bottom of article. When i use hover to make button green, it works only if user points his mouse at left or right of button. When im pointing mouse at center of text nothing is working.
<div class="readmore"><p>Read more</p></div>
.readmore
{
color: darkgreen;
border: 1px solid green;
margin-left: 177px;
margin-right: 177px;
font-size: 13px;
margin-top: 30px;
}
.readmore:hover
{
background-color: darkgreen;
transition: 0.18s linear;
color: white;
}
I expect button to backgroundcolor darkgreen and color white when im pointing mouse at center of text.
ALL CSS CODE:
body
{
background-color: white;
width: 100%;
margin: auto;
font-family: 'Open Sans', sans-serif;
background-color: palegreen;
}
.mateleafs
{
color: forestgreen;
font-size: 21px;
font-family: 'Merienda', cursive;
}
.header
{
background-color: white;
text-align: center;
padding-top: 1px;
padding-bottom: 3px;
border-bottom: green 2px solid;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
ul
{
word-spacing: 100px;
}
li
{
list-style-type: none;
display: inline-block;
font-size: 15px;
}
a
{
text-decoration: none;
color: black;
padding-top: 35px;
padding-bottom: 22px;
padding-left: 25px;
padding-right: 25px;
}
.home a
{
color: green;
}
.mateleafs a
{
color: green;
}
.home a:hover
{
background-color: yellow;
}
.history a:hover
{
background-color: dodgerblue;
}
.health a:hover
{
background-color: limegreen;
}
.energy a:hover
{
background-color: red;
}
.other a:hover
{
background-color: gray;
}
.mateleafs:hover
{
transform: rotate(-1deg);
}
.grid-content-container
{
display: grid;
margin-left: 50px;
margin-top: 230px;
margin-right: 50px;
grid-template-columns: 450px 450px 450px;
grid-column-gap: 30px;
grid-row-gap: 30px;
grid-auto-rows: 690px;
text-align: center;
}
.grid-content-container a
{
color: black;
}
article
{
background-color: navajowhite;
font-size: 15px;
color: darkgreen;
text-align: center;
}
main
{
background-color: white;
}
.footer
{
border-top: 2px solid green;
background-color: white;
padding: 10px;
margin-top: 60px;
text-align: center;
}
img:hover
{
opacity: 0.7;
transition: 0.45s ease-out;
}
.grid-content-container h2:hover
{
color: green;
transition: 0.45s ease-out;
}
.readmore
{
color: darkgreen;
border: 1px solid green;
margin-left: 177px;
margin-right: 177px;
font-size: 13px;
margin-top: 25px;
}
.readmore:hover
{
background-color: darkgreen;
transition: 0.24s ease-out;
color: white;
}
.date
{
font-size: 12px;
color: seagreen;
}
i
{
margin-right: 2px;
}
Your CSS and HTML work fine (as tested below). I assume you have some p tag styling that is overwriting the readmore style.
.readmore
{
color: darkgreen;
border: 1px solid green;
margin-left: 177px;
margin-right: 177px;
font-size: 13px;
margin-top: 30px;
}
.readmore:hover
{
background-color: darkgreen;
transition: 0.18s linear;
color: white;
}
<div class="readmore"><p>Read more</p></div>
.readmore
{
display: block;
width: 200px;
padding: 12px;
text-align: center;
}
.readmore:hover
{
background-color: gray;
transition: 0.7s;
color: black;
border-radius: 9px;
}
<div class="readmore"><p>Read more</p></div>
I have a range input like this:
.my-slider {
vertical-align: middle;
-webkit-appearance: none;
margin-left: 5px;
width: 100%;
height: 10px;
border-radius: 5px;
color: white;
background: white;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.my-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
border: none;
cursor: pointer;
}
.my-slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
border: none;
cursor: pointer;
}
.my-slider::-moz-range-track {
background-color: white;
}
<input type="range" min="0" max="275" value="0" class="my-slider" id="myRange">
Things are looking fine except that when I click on the thumb, 2 dashed lines appear, which look like this:
I have tried adding border: none and outline: none rules to remove these, to no avail. This happens in Firefox only, the dashed lines don't show in Chrome.
Anyone know how to remove the dashed lines? Thanks!
Use ::-moz-focus-outer selector.
input[type=range]::-moz-focus-outer {
border: 0
}
I would like my button to have a background/font-color transition when I hover it, but not when I am clicking it (active).
Currently I have the transition effect on both hover and active.
I tried adding transition: 0s ease-out; on either :active or :hover but I didn't get the expected result.
What is correct, cleanest and simplest way to do this (by using css) ?
button {
position: absolute;
width: 80px;
height: 28px;
font-size: 13px;
font-weight: 700;
line-height: 28px;
color: #6cb4d5;
font-family: 'Lato', sans-serif;
padding: 0;
border: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 1px solid #CCC;
background-color: #fff;
transition: 0.3s ease-out;
}
button:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
button:active {
color: #f7f7f7;
background-color: #398cb2;
outline: 0;
}
<button type="submit" name="sub-avatar-url" id="sub-avatar-url"> UPLOAD</button>
Thanks a lot.
Try this https://jsfiddle.net/2Lzo9vfc/93/
button {
position: absolute;
width: 80px;
height: 28px;
font-size: 13px;
font-weight: 700;
line-height: 28px;
color: #6cb4d5;
font-family: 'Lato', sans-serif;
padding: 0;
border: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 1px solid #CCC;
background-color: #fff;
transition: all 0.3s ease-out;
}
button:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
button:active {
color: red;
background-color: blue;
outline: 0;
transition: none;
}
If you want the button to go back to it's original colors on button:active, then adding in the original values to the :active block will correct this.
However, if you want to display the colors you have while hovering over the button while active, simply removing the :active block will give that effect.
Both are here next to each other. Hopefully this is what you wanted. :)
https://jsfiddle.net/2Lzo9vfc/94/
button {
position: absolute;
width: 80px;
height: 28px;
font-size: 13px;
font-weight: 700;
line-height: 28px;
color: #6cb4d5;
font-family: 'Lato', sans-serif;
padding: 0;
border: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 1px solid #CCC;
background-color: #fff;
transition: all 0.3s ease-out;
}
button:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
#sub-avatar-url2:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
#sub-avatar-url2:active {
background-color: #fff;
color: #6cb4d5;
outline: 0;
transition: none;
}
<button type="submit" name="sub-avatar-url" id="sub-avatar-url"> UPLOAD</button> <br><br>
<button type="submit" name="sub-avatar-url2" id="sub-avatar-url2"> UPLOAD</button>
This May Help you-
button {
position: absolute;
width: 80px;
height: 28px;
font-size: 13px;
font-weight: 700;
line-height: 28px;
color: #6cb4d5;
font-family: 'Lato', sans-serif;
padding: 0;
border: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-left: 1px solid #CCC;
background-color: #fff;
transition: 0.3s ease-in;outline: 0;
}
button:hover {
color: #f7f7f7;
background-color: #6cb4d5;
outline: 0;
}
button:active {
color: #f7f7f7;
background-color: #398cb2;
outline: 0;transition:all 0ms ease-out
}
button:focus{transition:all 0ms ease-out}
You could try applying the transition: 0s; to the active statement - however, you also need to add in the :focus event to the declaration chain to prevent the button transitioning when you release the click.
You can see the fiddle here:
http://jsfiddle.net/eks8Lc5c/