I am editing a website template which has the following css for a button class.
.button {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
background-color: transparent;
border-radius: 0.35em;
border: solid 3px #efefef;
color: #787878 !important;
cursor: pointer;
display: inline-block;
font-weight: 400;
height: 6.15em;
height: calc(2.75em + 6px);
line-height: 2.75em;
min-width: 20em;
padding: 0 1.5em;
text-align: center;
text-decoration: none;
white-space: nowrap;
margin:10px;
}
I am trying to increase the font within. Tried playing around with the values of line-height and height but wasn't able to increase the font size. Any ideas?
try font-size:__px whatever pixel value it is
I just added font-size property to CSS. It worked. Pretty Basic :P
All you need to do is utilize the CSS font-size property:
#yourdiv{
font-size:20px;
}
Add this:
size: 20px;
or:
font-size: 20px;
Related
Consider the following output:
In the output, you can notice weird corners in the username input (extra white-colored edges.) But they do not appear in the password input.
What might be causing this? Is there any way in CSS to fix this weird behavior?
(Note: I use Chrome as my browser.)
I looked for solutions on Google, but did not find any. I would like the weird corners of the rounded border to not appear.
#input-box{
outline: none !important;
width: 60%;
height: 38px;
padding: 8px 10px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #c1bdb8;
border-radius: 4px;
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-webkit-transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
-moz-transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
-o-transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
border-radius: 0 !important;
-webkit-appearance: none !important;
}
<input type="text" id="input-box" placeholder="Enter Something">
Why in Safari (on :hover) not the whole button turns to my hover-color ?
(Something wrong with padding I assume)
--- Result in Safari:
--- Result in Chrome (expected):
.btn,
a.btn{
background-color: #027BFF;
border-color: #007bff;
color: #fff;
border-radius: 0;
padding: 42px 20px;
transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out;
transition-property: color, background-color, border-color, box-shadow;
transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
transition-delay: 0s, 0s, 0s, 0s;
}
.btn:hover, a.btn:hover {
background-color: pink;
color: #fff;
box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 5%);
cursor: pointer;
}
<span>Search</span>
I was having a similar issue with :hover in Safari. On hover, my a button was not filling in completely like your example.
I narrowed the bug down to my font-family:
body { font-family: Inter, 'Arial Narrow Bold', sans-serif; }
I have Inter imported via fonts.bunny.net and if I remove Inter and use a system font the :hover behaves as expected. The moment I use an imported font, the issue comes back.
I was able to fix it completely by using switching to Google Fonts instead of fonts.bunny.net
The problem seems to be with Safari's handling of box-shadow ->
.btn,
a.btn{
background-color: #027BFF;
border-color: #007bff;
color: #fff;
border-radius: 0;
padding: 42px 20px;
transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out;
transition-property: color, background-color, border-color, box-shadow;
transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
transition-delay: 0s, 0s, 0s, 0s;
}
.btn:hover, a.btn:hover {
background-color: pink;
color: #fff;
/* box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 5%); */
cursor: pointer;
}
<span>Search</span>
I'm using Bootstrap and I want to link all button elements to have the same CSS properties as the btn and btn-primary classes.
How can this be achieved? Thanks!
You can adjust the button element itself and copy the CSS properties over from the .btn and .btn-primary.
button {
display: inline-block;
font-weight: 400;
color: #858796;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.35rem;
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
color: #fff;
background-color: #075b8f;
border-color: #075b8f;
}
button:hover {
color: #fff;
background-color: #0773b1;
border-color: #0773b1;
cursor: pointer;
}
button:focus, button.focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(105, 136, 228, 0.5);
box-shadow: 0 0 0 0.2rem rgba(105, 136, 228, 0.5);
}
<button>Click me</button>
If you do not want to write CSS values for the button element itself, you will need to use JavaScript to apply a class on each button element:
[...document.querySelectorAll('button')].forEach(button => {
button.classList.add("btn-primary");
button.classList.add("btn");
})
.btn, .btn-primary {
color:red;
}
<button>test</button>
<button>test2</button>
I have the following CSS / HTML code:
CSS:
#buttons a {
margin: 0 30px;
display: inline-block;
position: relative;
padding: 9px 3px;
-webkit-transition: background 500ms ease-in-out;
-moz-transition: background 500ms ease-in-out;
-ms-transition: background 500ms ease-in-out;
-o-transition: background 500ms ease-in-out;
transition: background 500ms ease-in-out;
}
#buttons a span{
background: #242424;
font-size: 1.7em;
color: #fffae6;
border: 1px solid #fff;
outline: 4px solid #242424;
position: relative;
width: 100%;
height: 100%;
padding: 5px 40px;
-webkit-transition: background 500ms ease-in-out;
-moz-transition: background 500ms ease-in-out;
-ms-transition: background 500ms ease-in-out;
-o-transition: background 500ms ease-in-out;
transition: background 500ms ease-in-out;
}
HTML:
<a class="restaurant_book_button" href="/book"><span>Book Online</span></a>
How it renders in Safari:
How it renders in Chrome:
Any ideas what could be causing this?
Try box-sizing with -webkit prefix in span because you are using padding while your span width is 100%.
I have a nice little hover effect on my website that quickly transitions in as the user hovers over a link. But when the user leaves hovering over the box, the shadow (and other traits) go away immediately, instead of fading back out. Is there a way I can get the properties to fade both in AND out, maybe using some sort of :un-hover type pseudo class? Thanks! And here is the CSS block if it helps:
a.squares:hover, a.squares:active {
color: black;
background-color: #E8E8E8;
box-shadow: 0 0 12px black;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
-moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
Put the transitions on a.squares not a.squares:hover
a.squares {
-webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
-moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
a.squares:hover, a.squares:active {
color: black;
background-color: #E8E8E8;
box-shadow: 0 0 12px black;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
I went through this exact thing when I was just leaving about transitions :)