This question already has answers here:
Element opacity but not border
(4 answers)
Closed 5 years ago.
my object is transparent but has a nice borders. Can I show only these borders in CSS or HTML?
I don't quite understand what you mean, you were pretty vague and didn't post any code. But if you are saying you want to keep the border but get rid of opacity I put some CSS code below that should help.
.btn {
border: 4 px;
border-color: black;
color: black;
padding: 14px 28px;
cursor: pointer;
font-weight: bold;
opacity: 1;
}
.bttn {background-color: white;}
.bttn:hover {background-color: #f2f2f2;}
If you are trying to keep your borders and use opacity set the opacity to 1. Or if you are trying to use an opacity less than one add something like so.
.bttn a {
border: 4px;
border-style: solid;
border-color: black;
}
Hope this helps.
Related
This question already has answers here:
What is the opposite of :hover (on mouse leave)?
(13 answers)
Closed 1 year ago.
I set a hover transition for my button but as you can see when the mouse gets out of the button there is no animation like before what should I do to get transition for it?
thanks a lot.
#button{
background-color: #F69680;
border: 2px solid #2e2263;
text-align: center;
text-transform: uppercase;
text-decoration: none;
outline: none;
margin-top: 20px;
padding: 10px 20px;
color: #2e2263;
}
#button:hover{
transition: 0.25s;
background-color: #2e2263 ;
color: #F69680;
padding: 15px 30px;
}
I'm sure there is a better solution but you can set a transition on the #button, so if the button is not hovered anymore the #button is executed/drawn.
This question already has answers here:
How do you remove the blue border of an image map?
(2 answers)
Closed 3 years ago.
How can I hide the square border around the button, thanks... and happy new year!
-my code for button
.btn-custom {
border-radius: 20px;
background-image: linear-gradient(to right,yellow,red,yellow);
margin: 13px auto;
padding: 10px;
color: white;
border: hidden;
}
.btn-custom:hover {
background-image: linear-gradient(to right,red,yellow,red);
}
Use the outline property set to none in this way:
.btn-custom{
outline: none;
}
This will remove the blue border
Check this script
.btn-custom {
border: none;
outline: none;
}
This question already has answers here:
CSS Text underlining too long when letter-spacing is applied?
(8 answers)
Closed 5 years ago.
I have a link where the text has some letter-spacing. Now the bottom border goes further than the link because of that. How can I avoid that e.g. how can I make the bottom border fit to the link text?
LINK
css:
a {
letter-spacing: 3px;
font-size: 30px;
border-bottom: 2px solid orange;
text-decoration: none
}
FIDDLE
The only way to overcome this issue is to hack your way through it: by wrapping your text in a span we can remove 3px on the right with a negative margin:
a {
font-size: 30px;
border-bottom: 4px solid green;
letter-spacing: 3px;
text-decoration: none;
}
span {
display: inline-block;
margin-right: -3px;
}
<span>LINK</span>
This question already has answers here:
How to remove the border highlight on an input text element
(21 answers)
Closed 5 years ago.
I use an <input> for which I style the border:
input {
font-size: 300%;
border-width: 10px;
border-style: solid;
border-radius: 30px;
}
<input>
The problem is that once <input> has the focus, a tiny blue border appears:
I do not see it anywhere in DevTools so I believe it is a property of <input> itself, which was not intended to have rounded borders (wildly guessing)
Is it possible to get rid of it?
You can remove it with outline:none, but it creates accessibility issues.
input {
font-size: 300%;
border-width: 10px;
border-style: solid;
border-radius: 30px;
outline:none;
}
<input>
that should work for you
textarea:focus, input:focus{
outline: none;
}
but this is already more detailed in the following link
How to remove border (outline) around text/input boxes? (Chrome)
input:focus {
outline: none;
}
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 5 years ago.
.button {
font-size: 18px;
font-family: Bradley Hand;
color: purple;
background: rgb(0, 255, 0); /*Default settings for button*/
border: 5px;
width: 100px;
height: 50px;
transition-duration: 0.5s;
border-radius: 10%;
}
.button:hover {
background: rgb(0, 255, 125); /*Changes the buttons size, color,*/
width: 120px; /*and font size*/
height: 60px;
font-size: 22px;
}
<button class = "button">Click me!</button>
I want it to look like you are actually pressing a button. Someone help!
Try and look at this side on w3schools, they got some pretty good code on button animations. https://www.w3schools.com/howto/howto_css_animate_buttons.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aactive
.button:active { /* your code here */}
I suggest you make it darker when clicked, maybe add a gradient inside so it looks recessed.
Style button when :active different from :hover