I have the following code where I have a Button that has the arrow hack. The only issue is I'd like to have this display the link on the status bar. A button does not achieve. How do I convert this to a a href link and still be able to keep that arrow? Here is my code:
JSFIDDLE
HTML:
<button type="button" class="btn-lg btn-default my-button my-button-active">My Button</button>
CSS:
.my-button {
color: #fff ;
background-color: #444346;
font-size:15px;
padding: 20px 0px;
border:none;
margin-right:20px;
position: relative;
outline:0;
width:31%;
}
.my-button-active:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-top: solid 7px #444346;
border-left: solid 7px transparent;
border-right: solid 7px transparent;
}
.my-button-active:hover:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-top: solid 7px #e6e6e6;
border-left: solid 7px transparent;
border-right: solid 7px transparent;
}
It is very simple. Just convert the button to a and add display: block; or display: inline-block; to the class .my-button.
Fiddle link: http://jsfiddle.net/samirkumardas/60n0ruyj/2/
Change your html to an anchor tag:
<a class="btn-lg btn-default my-button my-button-active" href="">My Button that links to some other page</a>
Replace your .my-button selector with:
.my-button {
display: block;
position: relative;
color: #fff;
background-color: #444346;
font-size:15px;
padding: 20px 0;
text-align: center;
border: none;
margin-right: 20px;
outline: 0;
width: 31%;
}
Just change your button to an anchor and adjust your css.
div {
margin: 30px;
}
a.my-button {
color: #fff ;
background-color: #444346;
font-size:15px;
padding: 20px 0px;
border:none;
margin-right:20px;
position: relative;
outline:0;
width:31%;
display: inline-block;
text-align: center;
}
.my-button:hover {
text-decoration: none;
}
.my-button-active:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-top: solid 7px #444346;
border-left: solid 7px transparent;
border-right: solid 7px transparent;
}
.my-button-active:hover:after {
content:'';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-top: solid 7px #e6e6e6;
border-left: solid 7px transparent;
border-right: solid 7px transparent;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div>
My Button that links to some other page
</div>
After changing your <button> tag to an <a> tag, the key thing is to have display: block; applied to it, as <a> tags are primarily inline elements and cannot have padding and margin.
Related
So I want to create a button that looks like this when it's active (you can see that it has a little arrow pointing to the right)
Currently I have something like that, it stays blue after clicked, text turns white and all that. I used .addClass for that, but I have no idea if I should use it again to glue on a triangle onto my button, there has to be a better way right?
While I'm at it, how can I make the shadow/sidebar?
Please, experienced people, give this beginner some enlightenment
add below css for
.active {
height: 50px;
width: 100px;
background: blue;
height: 50px;
width: 100px;
background: blue;
position: relative;
}
.active:after {
content: "";
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid black;
height: 0;
width: 0;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
}
<div class="active"></div>
try
.active {
height: 50px;
width: 200px;
background: #0092ff;
}
.active:after {
content: "";
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #0092ff;
display: block;
margin-left: 200px;
transform: translateY(75%);
}
.active:hover:after {
content: "";
border-left: 0px solid #0092ff;
transition: border-left 0.2s ease-in;
}
<div class="active"></div>
Please Check following working example.
$(function() {
$('.btn').click(function() {
$(this).closest('ul').find('.active').removeClass('active');
$(this).addClass('active');
});
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
padding: 10px;
background: teal;
position: relative;
display: block;
width: 60px;
cursor: pointer;
}
.active::after {
content: " ";
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid teal;
height: 0;
width: 0;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a class="btn active">Home</a></li>
<li><a class="btn">News</a></li>
<li><a class="btn">Contact</a></li>
<li><a class="btn">About</a></li>
</ul>
you need to add position:relative to the selector ul li.
after that, you can use the following code below to add content through the pseudo element after of the active link.
change the size of the borders, as well as positions for top and right to suit your needs.
ul li.active:after {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #0092ff;
position:absolute;
top: 15px;
right:-15px;
}
I have been trying hard without success to add a little triangle under my square to act as a pointer like this:
My code by itself works, but whenever I try to add css to make this triangle nothing will appear. I think it has to do with before-after functions, but I'm not really getting it. Anyone can help me with that?
<div id="slider_outer1">
<div class="slider_segment"><img src="myurl.com" alt="Nature" style="width:100%;"></div>
<div id="slider_marker1"></div>
</div>
<style>
.container {width:400px;}
#slider_outer1 {width: 98%;border: 5px solid #8f89ff; position: relative;display: inline-block; border-radius: 5px;}
.slider_segment {width: 100%; float: left; display: inline;}
#slider_marker1 {
position: absolute;
border: 2px solid #574fff;
height: 30px;
width: 5%;
top: 120px;
left: 57.25%;
text-align: center;
Margin-left: -10%;
padding: 5px 0px;
background: #ffffff;
border-radius: 5px;
}
div#slider_marker1:after {
content: "5";
font-size: 20px;
padding: 5px;
line-height: 30px;
font-family: sans-serif;
}
</style>
edit: code of the triangle
<div class="triangle-down"></div>
<style>
.triangle-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #555;
}
</style>
Generally in CSS triangles are made using borders, not before and after pseudo elements. To create a downward pointing triangle, you would create a top border of n number of pixels, and left and right borders of half that width and also transparent.
Example:
<div id="slider_outer1">
<div class="slider_segment"><img src="myurl.png" alt="Nature" style="width:100%;"></div>
<div id="slider_marker1"><div id='triangle-down'></div></div>
</div>
<style>
.container {width:400px;}
#slider_outer1 {width: 98%;border: 5px solid #8f89ff; position: relative;display: inline-block; border-radius: 5px;}
.slider_segment {width: 100%; float: left; display: inline;}
#slider_marker1 {
position: absolute;
border: 2px solid #574fff;
height: 30px;
width: 5%;
top: 120px;
left: 57.25%;
text-align: center;
Margin-left: -10%;
padding: 5px 0px;
background: #ffffff;
border-radius: 5px;
}
#triangle-down {
position: absolute;
top: 40px;
right: 50%;
transform: translateX(50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid blue;
}
div#slider_marker1:after {
content: "5";
font-size: 20px;
padding: 5px;
line-height: 30px;
font-family: sans-serif;
}
</style>
See my codepen here: https://codepen.io/anon/pen/bvXOab
You could add another div for the triangle like
<div id='triangle'></div>
Css For the triangle...
#triangle{
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 80px solid blue;
}
However I feel that your problem is not that it just isnt appearing its that the positioning is messed up so its 'hidden' behind the sliders
I think I understand what you're trying to make. This should add a triangle above the marker. This solution should allow you to also remove anything related to triangle-down as it only requires the slider_marker1 div
#slider_marker1::before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -6px;
left: 0;
right: 0;
margin: auto;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid green;
z-index: 100;
}
How can draw an up-down arrow with pure CSS?
This is what I get using HTML :
.up-down-arrow {
font-size: 50px;
color: #666;
padding: 0;
margin: 0;
display: inline-block;
}
<div class="up-down-arrow">↕</div>
But the line between the arrows is too short. Can I make it longer?
Ideally, this is what I am after:
Single element solution
You can achieve that with pseudo elements, CSS triangles and some positioning:
.arrow {
width: 2px;
height: 200px; /* <- adjust your height as you need it */
background: black;
margin: 10px;
position: relative;
}
.arrow::before,
.arrow::after {
content: '';
position: absolute;
left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.arrow::before {
top: 0;
border-bottom: 15px solid black;
}
.arrow::after {
bottom: 0;
border-top: 15px solid black;
}
<div class="arrow"></div>
Multiple elements solution
To achieve the actual arrow shape, you will need multiple elements. Here the pseudo elements are used to create white triangles, that cut out the black arrow heads:
.arrow {
width: 2px;
height: 200px; /* <- adjust your height as you need it */
background: black;
margin: 10px;
position: relative;
}
.up, .down, .arrow::before, .arrow::after {
position: absolute;
left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.up {
top: 0;
border-bottom: 15px solid black;
}
.down {
bottom: 0;
border-top: 15px solid black;
}
.arrow::before, .arrow::after {
content: '';
z-index: 2;
}
.arrow::before {
top: 11px;
border-bottom: 4px solid white;
}
.arrow::after {
bottom: 11px;
border-top: 4px solid white;
}
<div class="arrow">
<div class="up"></div>
<div class="line"></div>
<div class="down"></div>
</div>
Or another variant with a continuous line:
.line {
position: relative;
margin: -15px 0 -15px 9px;
width: 2px;
height: 180px;
background-color: black;
z-index: 5;
}
.up,
.down {
position: relative;
z-index: 3;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.up {
border-bottom: 15px solid black;
}
.down {
border-top: 15px solid black;
}
.down::before, .up::after {
position: absolute;
left: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: '';
z-index: 4;
}
.down::before {
bottom: 11px;
border-top: 4px solid white;
}
.up::after {
top: 11px;
border-bottom: 4px solid white;
}
<div class="arrow">
<div class="up"></div>
<div class="line"></div>
<div class="down"></div>
</div>
To make the up-down arrows with the line in between the same as your example, I would suggest using SVG. You can use it inline as shown in the following example :
.wrap{
position:relative;
height:70vh;
border-left:1px solid #000;
margin:10vh 50px;
padding:5vh 20px;
}
.arrow {
position:absolute;
left:-5px;
width: 9px;
height: auto;
}
.up{top:-9px;}
.down{bottom:-9px;}
<div class="wrap">
<svg class="arrow up" viewbox="0 0 7 10">
<path d="M3.5 0 L7 10 Q3.5 7 0 10z"/>
</svg>
<svg class="arrow down" viewbox="0 0 7 10">
<path d="M3.5 10 L7 0 Q3.5 3 0 0z"/>
</svg>
Whatever content you need here
</div>
The inline SVG arrows are made with a path element and using one quadratic curve (made with Q3.5 7 0 10 in the up arrow).
The line between the arrows is made with a border left on a container div it expands with the height of this container.
Both arrows are positioned absolutely.
Here is one more solution using arrow char code \027A4 for ::before and ::after content.
Size of these chars has bound to root font size rem and their modification rotate, top and left based on the content font-size.
.arrow {
position: relative;
width: 3px;
height: 150px;
margin: 20px;
background: tomato;
}
.arrow::before,
.arrow::after {
content: '\027A4';
position: absolute;
font-size: 1.5rem;
color: tomato;
}
.arrow::before {
top: -.9em;
left: -.5em;
transform: rotate(-90deg);
}
.arrow::after {
bottom: -.9em;
left: -.32em;
transform: rotate(90deg);
}
<div class="arrow"></div>
To keep it simple, change the height style in mid class to increase the length of line!
.up {
width: 0px;
height: 0px;
border-bottom: 10px solid black;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: none;
}
.mid {
margin-left:7px;
width: 2px;
height: 180px;
background-color:black;
}
.down{
width: 0px;
height: 0px;
border-top: 10px solid black;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: none;
}
<div class='up'></div>
<div class='mid'></div>
<div class='down'></div>
Hope it helps!
By responsive I mean that they still look good with slightly longer text and don't have fixed width.
I am trying to make buttons that look exactly like in image below, but I can't get them to be the right width. I thought adding padding on left and right side would do it, but that doesn't work with the "ADD" button. My task is to convert a .psd to html/css pixel perfect which is kind of dumb and results in bad code.
Fiddle: https://jsfiddle.net/emils/9g7cn7eh/
Buttons:
Button:
<div class="btn-container">
<button class="action-btn" type="submit">Add</button>
</div>
Styling:
.btn-container {
position: relative;
padding-bottom: 20px;
}
.action-btn {
padding: 4px 9px 4px 20px;
color: #f5f8f9;
font-size: 0.9375em;
letter-spacing: 0.4px;
text-transform: uppercase;
background-color: #aecacc;
border: 0;
}
.action-btn:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
margin-left: -20px;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 7px solid #f4f4f4;
}
.action-btn:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
margin-left: 8px;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 15px solid #aecacc;
}
Add position: relative to the buttons, and use right/left to move the pseudo elements.
JSfiddle: link
.btn-container {
position: relative;
padding-bottom: 20px;
}
.action-btn {
padding: 4px 9px 4px 20px;
color: #f5f8f9;
font-size: 0.9375em;
letter-spacing: 0.4px;
text-transform: uppercase;
background-color: #aecacc;
border: 0;
position: relative; /* we need this for the pseudo elements positioning */
}
.action-btn:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
left: 0;
/*margin-left: -20px;*/
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 7px solid #f4f4f4;
}
.action-btn:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 0;
right: -15px;
/*margin-left: 8px;*/
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #aecacc;
}
<div class="btn-container">
<button class="action-btn" type="submit">Add</button>
</div>
<div class="btn-container">
<button class="action-btn" type="submit">View Basket</button>
</div>
<div class="btn-container">
<button class="action-btn" type="submit">View All (15)</button>
</div>
<div class="btn-container">
<button class="action-btn" type="submit">Checkout</button>
</div>
I have the following CSS for a div element:
.tooltip
{
padding: .8em;
width: 12em; background:#999;
border-width: 2px !important;
border-color:#999;
position:absolute;
}
.tooltip .pointer, .tooltip .inner-pointer
{
position:absolute;
width:0;
height:0;
border-bottom-width: 0;
background: none;
}
.tooltip .pointer {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 14px solid #999;
bottom: -14px;
right: auto;
left: 5%;
margin-left: -7px;
}
.tooltip .inner-pointer {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #999;
bottom: auto;
top: -14px;
left: -5px;
}
Here is the DIV info
<div class="tooltip">Tooltip content goes here...<div class="pointer"><div class="inner-pointer"></div></div></div>
It the line below it, however cuts into the bottom of this tooltip, how do I make sure that it takes up all the space it is supposed to?
Here is an example in a jsFiddle:
http://jsfiddle.net/WEgBW/1/
Assuming that the problem is that something overlaps your tooltip, then you should add a z-index on the .tooltip
.tooltip
{
padding: .8em;
width: 12em; background:#999;
border-width: 2px !important;
border-color:#999;
position:absolute;
z-index: 999; /* added this line */
}