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;
}
Related
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;
}
When I click the button, a border is shown. How can I remove this border and why is it there?
This is the CSS code:
.operator button {
margin: 3px;
/*height: 25px;
width: 25px;*/
border-radius: 50%;
background-color: green;
border: none;
font-size: 10px;
padding: 12px 12px;
border: 2px solid #4CAF50;
transition-duration: 1s;
text-align: center;
display: inline;
}
[here is an image 1
Add outline: 0; on your button:focus :
.operator button {
margin: 3px;
/*height: 25px;
width: 25px;*/
border-radius: 50%;
background-color: green;
border: none;
font-size: 10px;
padding: 12px 12px;
border: 2px solid #4CAF50;
transition-duration: 1s;
text-align: center;
display: inline;
}
.operator button:focus { outline: 0; }
<div class="operator">
<button>Test</button>
</div>
You might want to read this too : https://stackoverflow.com/a/25298082/9718056
I need to create button like this
You can see a rounded borders on center of sides. I'm tried to do it with after and before classes, but it was tricky. Which solution is the cleanest? Also I'm done on dev resizeble button and it'll be better if this can be done as one figure, without absolute positioning or smth like that
body {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
}
button {
text-transform: uppercase;
background-color: #F9EFCA;
border: none;
padding: 20px 100px;
cursor: pointer;
letter-spacing: 1px;
border-bottom: 10px solid #ae9e5c !important;
box-shadow: inset 0 -1px 1px 0 rgba(0, 0, 0, .12), 0 10px 20px -5px rgba(0, 0, 0, .25);
font-size: 50px;
transition: .2s all;
position: relative;
border-radius: 10px;
}
button:hover,
button:active {
transition: .2s all;
border-bottom: none !important;
}
button:before,
button:after {
content: '';
position: absolute;
top: 9%;
bottom: 0;
height: 91%;
background: #F9EFCA;
width: 10px;
border-radius: 100%;
}
button:before {
left: -4px;
}
button:after {
right: -4px;
}
button:active:before,
button:active:after,
button:hover:before,
button:hover:after {
top: 9%;
bottom: 0;
height: 82%;
}
<button>Call me</button>
Codepen example
create a new button class and try this in your CSS:
.button_costum
{
margin: 10px auto;
font-size: 2.0rem;
padding: 1.25rem 2.5rem;
display: block;
background-color: // choose what you want
border: 1px solid transparent;
color: // choose what you want
font-weight: 300;
-webkit-border-radius: 3px;
border-radius: 20px; // in your case it shout be 25 or 30
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
try using the property on button
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
This would help you target the button corners without distorting the shape of the button itself.
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/
I have a problem in my button width. my form is able to switch language. For some language the content of the button is longer then the button width, How can I adjust the button width proprety to the text lenght ?
Here is my CSS :
html .formRowSubmit input[type="submit"] {
width: 26%;
margin: 5px 0% 5px ;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
You should try setting a min-width instead of a width, this will let the button expand if need be. Once you do this you should also set some horizontal padding so the text isnt butted up to the end like so:
input[type="submit"] {
min-width: 26%;
padding: 5px 15px;
}
http://jsfiddle.net/jqjxd0xt/
Display the button as an inline-block (and delete the width)
html .formRowSubmit input[type="submit"] {
/*width: 26%;*/
display: inline-block;
margin: 5px 0% 5px ;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
You might want to add some padding if the text is to close to the border.
Try like this: demo
CSS:
.formRowSubmit input[type="submit"] {
width: auto;
margin: 5px 0% 5px;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
HTML:
<div class="formRowSubmit">
<input type="submit" value="Submit loooong llloooonnnng text">
</div>