I have a button which displays a bottom border when hovering over it.
I want to reduce the length of the bottom border using CSS without changing the interactable size of the button. (Imagine the purple border only stretching to the length of the word) My current CSS is:
.storybook-button {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
cursor: pointer;
display: inline-block;
line-height: 1;
padding: 15px 25px;
color: #333;
background-color: transparent;
border-bottom: 5px solid blueviolet;
}
<div class="storybook-button">Button</div>
Any help would be appreciated!
Use background instead of border.
.storybook-button {
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
border: 0;
cursor: pointer;
display: inline-block;
line-height: 1;
padding: 15px 25px;
color: #333;
background-color: transparent;
background: linear-gradient(blueviolet 0 0) center bottom / 100% 5px no-repeat;
transition: 0.3s linear;
}
.storybook-button:hover {
/* border-width border-height */
background-size: 50% 5px;
}
<div class="storybook-button">Button</div>
Related
I am trying to make a horizontal card across part of the screen and so far everything looks exactly the way I want except the image only display partially in the card border, about halfway, and the covers the next card. I am trying to get it to sit evenly within the card. I have included a photo of what I mean and this is the code I am using. Please let me know if you need to see the html.
Edit: I added the html
.cardcontainer {
border: white solid 1px;
padding-left: 30px;
padding-bottom: 30px;
margin: 20px;
background-color: rgb(7, 16, 31);
}
.cardheading {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
position: relative;
}
.cardpara {
font-family: Arial, Helvetica, sans-serif;
color: rgb(117, 117, 117);
position: relative;
padding-bottom: 25px;
padding-right: 25px;
font-style: italic;
width: auto;
}
.cardimg {
width: 130px;
height: 130px;
float: right;
padding:0;
margin-right: 30px;
}
.learnmorebutton {
border: none;
color: white;
padding: 10px 15px;
text-align: center;
font-size: 16px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
cursor: pointer;
margin: 0 auto;
border-radius: 15px;
animation: fade 10s linear infinite alternate;
text-decoration: none;
}
html:
<div class="cardcontainer">
<h1 class="cardheading">placeholder<i class="location">placeholder</i></h1>
<p class="cardpara">placeholder</p>
<a class="learnmorebutton" href="#" target="_blank">Learn More</a>
<img class="cardimg" src="#">
</div>
The basic answer to your question, is that you need to clear the float on the image by adding the overflow property to the parent. However, the content within .cardpara is going to push the image down. Not sure if that's what you want.
If you want the image next to the content in <p> and text to wrap around it, then move your <img> tag before <p> in the markup.
.cardcontainer {
border: white solid 1px;
padding-left: 30px;
padding-bottom: 30px;
margin: 20px;
background-color: rgb(7, 16, 31);
overflow: auto;
}
.cardheading {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
position: relative;
}
.cardpara {
font-family: Arial, Helvetica, sans-serif;
color: rgb(117, 117, 117);
position: relative;
padding-bottom: 25px;
padding-right: 25px;
font-style: italic;
width: auto;
}
.cardimg {
width: 130px;
height: 130px;
float: right;
padding:0;
margin-right: 30px;
}
.learnmorebutton {
border: none;
color: white;
padding: 10px 15px;
text-align: center;
font-size: 16px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
cursor: pointer;
margin: 0 auto;
border-radius: 15px;
animation: fade 10s linear infinite alternate;
text-decoration: none;
}
<div class="cardcontainer">
<h1 class="cardheading">placeholder<i class="location">placeholder</i></h1>
<p class="cardpara">placeholder</p>
<a class="learnmorebutton" href="#" target="_blank">Learn More</a>
<img class="cardimg" src="https://via.placeholder.com/130?text=PLACEHOLDER">
</div>
I managed to fix it, I used overflow:auto then I put the <img> before the <p> and changed it to the <span> element, then played around with the padding and line breaks and managed to get my resault. Thanks EternalHour :)
I have this element:
.container {
font-size: 14px;
line-height: 20px;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.link {
color: #3072c4;
cursor: pointer;
}
.counter {
display: inline-block;
min-width: 9px;
padding: 0 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
<span class="container">
<span class="link">
Feedback
</span>
<span class="counter">166</span>
</span>
Its height must be 17px, horizontal padding should be 4px and font size should be 12px. It looks like a prototype in Chrome and Firefox:
But there is a problem in Internet Explorer:
It lowers the text inside, it is not well aligned vertically. If I set line-height and width of element to 18px (as well as every other even value), everything is OK, but I need 17px. How to avoid text lowering in IE?
You can add a specific style for IE. You can try this:
.container {
font-size: 14px;
line-height: 20px;
font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.link {
color: #3072c4;
cursor: pointer;
}
.counter {
display: inline-block;
min-width: 9px;
padding: 0 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE Edge 12+ CSS styles go here */
.counter {
display: inline-block;
min-width: 9px;
padding: 0px 4px 1px 4px;
text-align: center;
line-height: 17px;
background: #FF8000;
color: #fff;
font-size: 12px;
font-weight: 700;
border-radius: 17px;
}
}
<span class="container">
<span class="link">
Feedback
</span>
<span class="counter">166</span>
</span>
I have a button for my page that I'm also styling it
<button id="logButton" >Iniciar sesión</button>
And then the css code
#logButton
{
width:119px;
margin-bottom: 5px;
padding-top: 3px;
margin-left:35%;
height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
Here's a fiddle also.
If I add the bootstrap class btn it doesn't do that and neither the font size nor the width of the button changes, my question is what does bootstrap do to keep text in place?
It's a natural behavior of an element, with fixed height and width, content will always overflow,it's better to use min-width and min-height.
#logButton
{
min-width:119px;
margin-bottom: 5px;
padding-top: 3px;
margin-left:35%;
min-height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
<button id="logButton" >Iniciar sesión Iniciar sesión</button>
and If you want to know about bootstrap's .btn here is css:
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
#logButton
{
/* Removed height & width*/
padding: 10px 20px; /* Added */
margin-bottom: 5px;
margin-left:35%;
font-weight: bold;
font-size: 31px;
font-family: helvetica, arial, sans-serif;
}
Don't hardcode a width. Using padding on the left and right sides. Here you go.
#logButton
{
padding: 3px 15px 0 15px;
margin-bottom: 5px;
margin-left:35%;
height: 25.5333px;
font-weight: bold;
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}
if you want to hide overflow of text then use {overflow:hidden} is css code.
if you want to keep text but not want to increase with then use {height:auto}
I'm a newbie.
I'm trying to remove the letter-spacing on the last letter for an a tag I styled into a button and centred on the page.
body {
background-color: #1E1E96;
}
a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFF;
text-decoration: none;
font-size: 12px;
}
.btn-wrapper {
text-align: center;
margin: 100px auto;
}
.btn-wrapper a {
text-transform: uppercase;
text-align: center;
letter-spacing: 10px;
padding: 15px 40px;
border: solid 2px #FFF;
}
<body>
<div class="btn-wrapper">
Change Colour
</div>
</body>
I tried
.btn-wrapper a {
margin-right: -10px;
}
and
.btn-wrapper a {
text-indent: 10px;
}
with no joy.
I am loath to put a span on the last letter.
The above suggestions I found on Stack Overflow.
Can someone please explain what's going on with my code and help find a solution?
Thanks in advance.
You could wrap the entire text part of the link in a span and use the margin-right: -10px technique to get this done.
body {
background-color: #1E1E96;
}
a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFF;
text-decoration: none;
font-size: 12px;
}
.btn-wrapper {
text-align: center;
margin: 100px auto;
}
.btn-wrapper a {
text-transform: uppercase;
text-align: center;
letter-spacing: 10px;
padding: 15px 40px;
border: solid 2px #FFF;
}
.btn-wrapper a span {
margin-right: -10px;
}
<body>
<div class="btn-wrapper">
<span>Change Colour</span>
</div>
</body>
Edit :
Browsers have bugs.
Firefox bug is https://bugzil.la/299943 and the one for Chrome is https://crbug.com/267056.
You could simply incorporate the displacement inside padding with:
padding: 15px 30px 15px 40px; // no <span>s required
Maybe try change padding, so instead of 40px right use 30px, which is 40px - 10px letter-spacing.
.btn-wrapper a {
text-transform: uppercase;
text-align: center;
letter-spacing: 10px;
padding: 15px 30px 15px 40px;
border: solid 2px #FFF;
}
<body>
<div class="btn-wrapper">
Change
</div>
<style>
body {
background-color: #1E1E96;
}
a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFF;
text-decoration: none;
font-size: 12px;
}
.btn-wrapper {
text-align: center;
margin: 100px auto;
}
.btn-wrapper a {
text-transform: uppercase;
text-align: center;
letter-spacing: 10px;
padding: 15px 40px;
padding-right: 30px;
border: solid 2px #FFF;
}
</style>
</body>
Edited the padding and thats it :D decreased right padding of <a></a> to 30
Use like this
body {
background-color: #1E1E96;
}
a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFF;
text-decoration: none;
font-size: 12px;
}
.btn-wrapper {
text-align: center;
margin: 100px auto;
}
.btn-wrapper a {
text-transform: uppercase;
text-align: center;
letter-spacing: 10px;
padding: 15px 40px;
border: solid 2px #FFF;
}
.btn-wrapper a span {
margin-right: -10px;
letter-spacing:10px;
}
</style>
<body>
<div class="btn-wrapper">
<span>Change Colour</span>
</div>
</body>
I have a problem with the css for my web page. Basically, I want to make it so when you hover over one of the links in the navigation bar, it puts a border around it. So, this is what I made:
a
{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
}
a:visited
{
font-weight: bold;
color: #4096ee;
text-decoration: none;
}
a:hover
{
font-weight: bold;
border-radius: 5px;
color: #4096ee;
padding: 4px;
border: solid 2px;
border-color: #303030;
text-decoration: none;
}
a:active
{
font-weight: bold;
color: white;
text-decoration: none;
}
And then I have 4 links on the same line with 4 &emsp in between them. Now, whenever I hover over a link, the border appears, but it kind of nudges the other links over to make space for the border. Is there any way I can stop this from happening?
why dont you put a border on the items and make it the same color as your background and simply change color on hover
try adding box-sizing : border-box to your css. This would make the border to go inside the element.
Change your CSS like this:
a
{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
border-radius: 5px;
padding: 4px;
border-color: transparent;
}
This way there will be no nudging.
You can just add a padding to the regular links. The hover state will override the regular padding and add the border.
a {
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
padding: 6px;
postion: absolute;
}
http://jsfiddle.net/5dQL5/
a{
text-align: center;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;;
font-size: 20px;
font-weight: bold;
color: #4096ee;
text-decoration: none;
postion: absolute;
border: 2px solid transparent;
}
Just add a border with the same width (in your case 2px) but make it transparent and that's all.
Add default 2px border to anchor tag, but make it tranparent. So it will not visible at first time when page is loaded. Then when you hover any anchor tag, change the border-color to #303030
Try this code
a{
border: 2px solid transparent;
}
a:hover{
border-color: #303030;
}