I have set some links for my websites so that when the mouse hovers over the links, the text underlines. However, even though the mouse hovers, the link moves. Is there anything I can do to fix this?
NOTE: The distance between the underline and the text must be .10em, and the underline thickness must be .15em.
Heres the code:
.selected_works {
color: #292929;
font-size: 18px;
font-weight: normal;
letter-spacing: 1px;
position: fixed;
top: 100px;
right: -20px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
text-decoration: none;
z-index: 999;
}
.selected_works:hover {
border-bottom: .15em solid #292929;
padding-bottom: .10em;
}
.selected_works:active {
text-decoration: none;
border-bottom: .15em solid #292929;
padding-bottom: .10em;
}
Thanks!
Its because of the hover style.
Here is a demo without the border + padding. See how it doesn't move.
CSS:
.selected_works:hover {
color: red;
}
DEMO WITHOUT
And now a demo with your style:
CSS:
.selected_works:hover {
border-bottom: .15em solid #292929;
padding-bottom: .10em;
}
DEMO WITH
With the style you are pushing the text with a border and padding. So it would move as the size is changing.
WORKING DEMO
and here we added a <span> so you can :hover a text-decoration:border; without moving
http://jsfiddle.net/FCtTm/2/
<div class="selected_works"><span>Testing</span></div>
<style type="text/css">
.selected_works:hover span {
border-bottom: .15em solid #292929;
padding-bottom: .10em;
}
.selected_works:active span {
text-decoration: none;
border-bottom: .15em solid #292929;
padding-bottom: .10em;
}
</style>
Related
i'm trying to reproduce this https://gyazo.com/848fa4e24ecb33f220a465cdcf571698
only using css.
I got the "arrow" with the border properties and then rotate to the side i want with these css rules and the html:
border-right: 2px solid black;
border-bottom: 2px solid black;
padding: 5px;
transform: rotate(-45deg);
But with i can't find a way to have that element with a background like the image on the link :/
Any hints? Thanks in advance.
Use border-radius:50% for the circle and for the angle use pseudo-class ::before or ::after to display it as content.
Demo
.right-arrow {
display: block;
text-decoration: none;
background: #8AD82F;
border-radius: 50%;
width: 45px;
height: 45px;
}
.right-arrow::after {
content: '\a0\a0\276f';
font-size: 32px;
font-weight: 900;
color: #fff;
}
In short, I have a button with a darker bottom border, and, on hover, I want the button to move down a little and shrink the border (to give the effect of pressing it).
However, it jitters slightly as it animates, completely killing the feel of the button "pressing".
Here's a Fiddle demonstrating the issue, along with the CSS in question:
.btn {
color: grey;
background: lightgrey;
border: 0 rgba(0, 0, 0, .1) solid;
border-bottom-width: 4px;
font-family: sans-serif;
padding: 10px;
position: relative;
text-decoration: none;
top: 0;
transition: all 250ms;
}
.btn:hover {
top: 2px;
border-bottom-width: 2px;
}
I'm not using the prefixes like -webkit here for the sake of simplicity.
The main issue is the bottom border. The button slides down fine, but the border appears to be doing something different (and isn't smooth).
Any ideas here?
Try to replace the top transition with transform: translateY(2px), also replace the bottom border with a ::before pseudo element and animate it's scale property:
https://jsfiddle.net/qjfstq1c/1/
.btn, .btn:before {
transition: all 250ms;
transform-origin: top center;
}
.btn {
display: inline-block;
color: grey;
background: lightgrey;
font-family: sans-serif;
padding: 10px;
position: relative;
text-decoration: none;
}
.btn:before {
content: '';
position: absolute;
top: 100%; left: 0; right: 0;
border-top: 4px solid #bebebe;
}
.btn:hover {
transform: translateY(2px);
}
.btn:hover:before {
transform: scaleY(.5);
}
I am trying to create the button below by using the pseudo-elements before and after. I do not want to manipulate the HTML DOM. I'm searching for a solution with pure CSS.
How is it possible to make the currently white border-color of these triangles transparent?
//EDIT: The marked topic does not answer my question because I need a different angle than just rotating a square. It is also not transparent. I don't want to manipulate the DOM.
//SOLVED: This is the result after using Kate Millers solution:
//EDIT2: There is another problem with the solution I use now:
Is there a way to fix the border-width of the triangles (left and right)?
Here you can see how the size changes to 14.4 and 26.4px, 26.4px:
The best solution is to reverse the triangles (so you're adding top and bottom triangles that match the button, but not on the sides). You can technically make "transparent" triangles, but you can't have that transparency apply to a different object.
One of the most important things I changed was that the background color and padding of the button has to apply to the span element (which means each button will need an interior span), not .btn.
If you replace all of your CSS about the buttons with the below, you'll have a solution that gets you at least 90% of the way there. The angle isn't perfect because it's stopping at the text. If you want to make the angle truly perfect, you'll probably need to do some absolute positioning, which would make it messy as your button sizes change.
The non-code way you can also achieve this is to create a .png or .svg with triangles that match the color of your button and insert them into the :before and :after with content: ' ';
body { margin: 20px; background:#c2c2c2; }
.btn {
display: inline-block;
text-shadow: 0 1px 0 #000;
font-weight: bold;
text-transform: uppercase;
}
.btn {
padding: 11px 40px;
color: #fff;
position: relative;
background: #a00;
}
.btn:before, .btn:after {
content: '';
border-top: 20px solid #a00;
border-bottom: 20px solid #a00;
position: absolute;
top: 0;
}
.btn:before {
border-left:20px solid transparent;
left: -20px;
}
.btn:after {
border-right:20px solid transparent;
right:-20px;
}
.btn.inset:before, .btn.inset:after {
content: '';
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
position: absolute;
top: 0;
}
.btn.inset:before {
border-right:20px solid #a00;
left: -40px;
}
.btn.inset:after {
border-left:20px solid #a00;
right:-40px;
}
<div class="btn">Text in my little banner button</div>
<div class="btn inset">Text in my little banner button</div>
I don't use, and am not really familiar with, LESS... but you can create a similar element using a span and a wrapper with pseudo elements. It does take 2 triangles for each side (hence the span).
body { margin: 20px; background: #ddd; }
.btn {
display: inline-block;
padding: 11px 40px;
color: #fff;
position: relative;
background: #a00;
text-shadow: 0 1px 0 #000;
font-weight: bold;
text-transform: uppercase;
}
.btn:after,
.btn span:after,
.btn:before,
.btn span:before {
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
right: 0;
border: 10px solid transparent;
}
.btn:after {
top: 0;
border-right-color: #ddd;
border-bottom-color: #ddd;
}
.btn span:after {
bottom: 0;
border-right-color: #ddd;
border-top-color: #ddd;
}
.btn:before {
top: 0;
left:0;
border-left-color: #ddd;
border-bottom-color: #ddd;
}
.btn span:before {
bottom: 0;
left:0;
border-left-color: #ddd;
border-top-color: #ddd;
}
<div class="btn"><span>Text in my little banner button</span></div>
I realize the ends aren't really transparent, they just match the background color to appear transparent.
I would like to make a button like these one just with CSS without using another element.
Button Image
Since the button has a border attached, I think I normally need both, the :before and :after elements to create just one arrow at one side. So to make one arrow at each side I would need another span element inside the link.
The second method I tried is the one you see below. But with this solution they are not properly centered and each side of the arrow is different in length.
Has someone a solution?
/* General Button Style */
.button {
display: block;
position: relative;
background: #fff;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 20px;
text-decoration: none;
text-transform: uppercase;
color: #e04e5e;
margin: 40px auto;
font-family: Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
/* Button Border Style */
.button.border {
border: 4px solid #e04e5e;
}
.button.border:hover {
background: #e04e5e;
color: #fff;
}
/* Button Ribbon-Outset Border Style */
.button.ribbon-outset.border:after,
.button.ribbon-outset.border:before {
top: 50%;
content: " ";
height: 43px;
width: 43px;
position: absolute;
pointer-events: none;
background: #fff;
}
.button.ribbon-outset.border:after {
left: -3px;
margin-top: -40px;
transform-origin: 0 0;
box-sizing: border-box;
border-bottom: 4px solid #e04e5e;
border-left: 4px solid #e04e5e;
transform: rotate(57.5deg) skew(30deg);
}
.button.ribbon-outset.border:before {
right: -46px;
margin-top: -40px;
transform-origin: 0 0;
box-sizing: border-box;
border-top: 4px solid #e04e5e;
border-right: 4px solid #e04e5e;
transform: rotate(57.5deg) skew(30deg);
}
.button.ribbon-outset.border:hover:after {
background: #e04e5e
}
.button.ribbon-outset.border:hover:before {
background: #e04e5e
}
Click me!
CodePen Demo
Here is another alternate way to get this done with only one element.
This approach works like below:
Two pseudo-elements :before and :after which are about half the size (including borders) of the main .button element. The height of each pseudo-element is 34px + 4px border on one side (top/bottom) and 2px on the other side.
The top half of the shape is achieved using the :before element whereas the bottom half is achieved using the :after element.
Using a rotateX with perspective to achieve the tilted effect and positioning to place the two elements such that they form the expected shape.
/* General Button Style */
.button {
position: relative;
display: block;
background: transparent;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 20px;
text-decoration: none;
text-transform: uppercase;
color: #e04e5e;
margin: 40px auto;
font-family: Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
.button:before,
.button:after {
position: absolute;
content: '';
width: 300px;
left: 0px;
height: 34px;
z-index: -1;
}
.button:before {
transform: perspective(15px) rotateX(3deg);
}
.button:after {
top: 40px;
transform: perspective(15px) rotateX(-3deg);
}
/* Button Border Style */
.button.border:before,
.button.border:after {
border: 4px solid #e04e5e;
}
.button.border:before {
border-bottom: none; /* to prevent the border-line showing up in the middle of the shape */
}
.button.border:after {
border-top: none; /* to prevent the border-line showing up in the middle of the shape */
}
/* Button hover styles */
.button.border:hover:before,
.button.border:hover:after {
background: #e04e5e;
}
.button.border:hover {
color: #fff;
}
<!-- Library included to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
Click me!
Fixed Width Demo | Dynamic Width Demo
Output Screenshot:
This is tested in Chrome v24+, Firefox v19+, Opera v23+, Safari v5.1.7, IE v10.
As-is, this would degrade quite well in IE 8 and IE 9 into a square button with borders. However, due to the nullification of one border (border-bottom for :before and border-top for :after) it would leave a white area (resembling a strike-through line) in the middle. This can be overcome by adding a couple of IE < 10 specific styles using conditional comments like in this demo.
<!--[if IE]>
<style>
.button.border:after{
top: 38px;
}
.button.border:hover:before, .button.border:hover:after {
border-bottom: 4px solid #e04e5e;
}
</style>
<![endif]-->
Output Screenshot from IE 9 and IE 8:
This is just a simpler alternative to Harry's answer.
This approach uses scale() and rotate(45deg) transforms. Using this approach, you can very easily change the angle of right and left chevrons.
Fiddle
div {
height: 70px;
width: 200px;
margin-left: 40px;
border-top: 4px solid #E04E5E;
border-bottom: 4px solid #E04E5E;
position: relative;
text-align: center;
color: #E04E5E;
line-height: 70px;
font-size: 21px;
font-family: sans-serif;
}
div:before, div:after {
content:'';
position: absolute;
top: 13px;
height: 40px;
width: 40px;
border: 4px solid #E04E5E;
-webkit-transform: scale(0.8,1.25) rotate(45deg);
-moz-transform: scale(0.8,1.25) rotate(45deg);
-ms-transform: scale(0.8,1.25) rotate(45deg);
transform: scale(0.8,1.25) rotate(45deg);
}
div:before {
left: -22px;
border-top: 0px solid transparent;
border-right: 0px solid transparent;
}
div:after {
right: -22px;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
}
div:hover, div:hover:before, div:hover:after {
background-color: #E04E5E;
color: #EEE;
}
<div>HELLO!</div>
Want a wider arrow? Simply decrease scale() transform's x value : Fiddle (wide)
Narrower one? Increase scale() transform's x value : Fiddle (narrow)
Note: IE 8 and below don't support CSS Transforms (9 supports with -ms- prefix), so you can check out this site for supporting them: IE Transform Translator
I forked your Pen
Codepen Demo
The essential changes are that I removed the side borders from the main button (as they were superflous
/* Button Border Style */
.button.border {
border-top: 4px solid #e04e5e;
border-bottom: 4px solid #e04e5e;
}
and changed a couple of values to tweak it all into place
/* Button Ribbon-Outset Border Style */
.button.ribbon-outset.border:after,
.button.ribbon-outset.border:before {
top: 50%;
content: " ";
height: 43px;
width: 43px;
position: absolute;
pointer-events: none;
}
.button.ribbon-outset.border:after {
left:0;
margin-top:-40px;
transform-origin:0 0;
box-sizing:border-box;
border-bottom:4px solid #e04e5e;
border-left:4px solid #e04e5e;
transform:rotate(57.5deg) skew(30deg);
}
.button.ribbon-outset.border:before {
right:-43px;
margin-top:-40px;
transform-origin:0 0;
box-sizing:border-box;
border-top:4px solid #e04e5e;
border-right:4px solid #e04e5e;
transform:rotate(57.5deg) skew(30deg);
}
I got the answer myself. It was a problem of the transform property of the :before and :after elements.
CSS changed:
/* Button Border Style */
.button.border {
border-top:4px solid #e04e5e;
border-bottom:4px solid #e04e5e;
}
/* Button Ribbon-Outset Border Style */
.button.ribbon-outset.border:after, .button.ribbon-outset.border:before {
height: 42px;
width: 42px;
}
.button.ribbon-outset.border:after {
left:0;
border-bottom:5px solid #e04e5e;
border-left:5px solid #e04e5e;
transform:rotate(45deg) skew(19deg,19deg);
}
.button.ribbon-outset.border:before {
right:-42px;
border-top:5px solid #e04e5e;
border-right:5px solid #e04e5e;
transform:rotate(45deg) skew(19deg,19deg);
}
Updated Codepen
I want to add a white gap between menu elements but Im encountering a weird problem. See this jfiddle: http://jsfiddle.net/ERYat/1/
Here is the CSS code:
/* a styling */
ul#menu-menu-services a {
display: block;
font-size: 20px;
color: #000;
text-decoration: none;
padding: 5px;
border-bottom: 2px solid #fff;
border-left-style: solid;
border-left-width: 3px;
border-left-color: #000;
}
/* li fix */
ul#menu-menu-services li {
margin: 0;
padding: 0;
border: none;
}
/* Sub Menu */
ul#menu-menu-services li ul.sub-menu {
display: block;
margin-left: 0px;
}
ul#menu-menu-services li ul.sub-menu li a {
padding-left: 15px;
font-size: 14px;
}
I can't figure out why is the border diagonal on the left. Anyone knows?
Borders come together like this:
||
||______
|/______
You should use margin-bottom instead of border-bottom fiddle:
ul#menu-menu-services a {
display: block;
font-family: 'Droid Sans', arial, serif;
font-size: 20px;
color: #000;
text-decoration: none;
padding: 5px;
margin-bottom: 2px;
border-left-style: solid;
border-left-width: 3px;
border-left-color: #000;
}
And if you need a white line, consider using :after:
ul#menu-menu-services a { position: relative; }
ul#menu-menu-services a:after {
content: '';
width: 100%;
position: absolute;
height: 2px;
background: #fff;
left: 0;
bottom: -2px;
}
It's because it's drawing the corner of the two borders. Try changing your bottom border to something other than white and you'll see more clearly what it's doing.
To get rid of this effect, you need to get rid of the bottom border.
If you need the gap that the bottom border is currently giving you, you could use padding-bottom or margin-bottom instead.