Clever Geek Handbook

CSS: Drag button border, not text.

I'm looking for an easy way with a single tag (simple <a>

) to create a skew effect on the borders, but keep the text as it is.

I would know how to do with a range inside or outside, but I don't want to have additional, almost zero HTML sense on the page.

See example below.

enter image description here

+3


source to share


3 answers


You can untie the child, that is, provide opposite skew coordinates as specified for the parent.

Here is a working example

Suppose you have below how you html,



<div class="btn">
    <button><div class="btn-text">Click</div></button>
</div>

If we skew the parent to 20deg

, then we have to skew the child to -20deg

like,

.btn {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}
.btn-text {
    -ms-transform: skewX(-20deg); /* IE 9 */
    -webkit-transform: skewX(-20deg); /* Safari */
    transform: skewX(-20deg);
    padding: 20px;
}
+4


source


You can simply accompany the desired effect using CSS triangle tags . Just add some styling for the :: before and :: after pseudo classes.



.skewed_button {
    background: #32CD32;
    color: #000;
    text-decoration: none;
    font-size: 20px;
    display: inline-block;
    height: 30px;
    margin-left: 15px;
    padding: 6px 10px 0;
}
.skewed_button::before {
    content: "";
    float: left;
    margin: -6px 0 0 -25px;
    border-left: 15px solid transparent;
    border-bottom: 36px solid #32CD32;  
    height: 0px;
}
.skewed_button::after {
    content: "";
    float: right;
    margin: -6px -25px 0 0 ;
    border-left: 15px solid #32CD32;
    border-bottom: 36px solid transparent;  
    height: 0px;
}
      

        
        
        
      

    
<a href="#some_url" class="skewed_button">Some Text</a>
Run codeHide result


+4


source


One solution is to use css triangles on :before

and :after

. This solution leaves the purest HTML.

This jsfiddle demonstrates

.is-skewed {
    width: 80px;
    height: 40px;
    background-color: #f07;
    display: block;
    color: #fff;
    margin-left: 40px;
}

.is-skewed:before,
.is-skewed:after {
    content: '';
    width: 0;
    height: 0;
}

.is-skewed:before {
    border-bottom: 40px solid #f07;
    border-left: 20px solid transparent;
    float:left;
    margin-left: -20px;
}

.is-skewed:after {
    border-top: 40px solid #f07;
    border-right: 20px solid transparent;
    float:right;
    margin-right: -20px;
}

CSS triangles use thick borders for 0-dimensional elements with points where the borders meet, providing the diagonal line required for the triangle (a good visualization is to look at the border of the picture frame where two borders meet and create triangles). It is important that one border is transparent and one is colored, and the adjacent one (that is, the left and top, not the left and right). You can adjust the size, orientation and length of the sides by playing with the size of the borders.

For your button, we also use floats and negative margins to pull them out of the element and line them up correctly. Positional absolute and negative values ​​on the left and right would also be a good positioning solution

You can also do :hover

states

.is-skewed:hover {
    background-color: #40f;
}
.is-skewed:hover:after {
    border-top-color: #40f;    
}
.is-skewed:hover:before {
    border-bottom-color: #40f;
}

It is important to note the use of background-color

and border-color

, as well as that :hover

comes first in all relevant selectors. If the slope appeared a second it will happen

+1


source






More articles:


All Articles