How to do this kind of Button in CSS?


Tags: css,button,css-shapes

Problem :

I've been searching the Internet for a while and found nothing, so I'm turning to you guys.

I was wondering how you can do a button like this with CSS (On/Off button example):

Button On/Off

I already tried something like this :

HTML :

                <a class="button_tooltip" href="#">On</a>
                <a class="button_tooltip" href="#">Off</a>

CSS:

a {
    color: #76daff;
    display: inline-block;
    padding: 8px 16px;
    position: relative;
    text-decoration: none;
}
a {
    color: #76daff;
}
a.button_tooltip {
    background: #ccc none repeat scroll 0 0;
    color: black;
}
a.button_tooltip::after {
    border-top-color: #cccccc;
}
a.button_tooltip::after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ccc;
    content: "";
    margin-left: -8px;
}
a.button_tooltip {
    background: #cccccc none repeat scroll 0 0;
    color: #000000;
}
a.button_tooltip::after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ccc;
    content: "";
}
a.button_tooltip::after {
    border-top-color: #cccccc;
}

But only gave me the square without the little triangle underneath.



Solution :

This is easily possible with 2 elements and using a pseudo element to get the arrow bit underneath to show.

It doesn't take a great deal of HTML/CSS to complete and can easily be changed to work as an input or as an <a> tag. Whatever your requirements are.

$(document).ready(function() {
  $('.btn').click(function() {
    $('.btn').toggleClass('active');
  });
});
.container {
  width: 200px;
  height: 100px;
}
.btn {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid blue;
  float: left;
  cursor: pointer;
}
.active {
  background: blue;
  position: relative;
}
.active:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  transform: rotate(45deg);
  bottom: -10px;
  left: 25px;
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="btn"></div>
  <div class="btn active"></div>
</div>


    CSS Howto..

    How to style elements within other elements with css?

    How to strike through obliquely with css showing the text on top of the strike through

    How to put a ribbon image on another image with css?

    How to reference another selector in css

    Element width based on how many siblings are present

    How to remove/close bootstrap css notification? [closed]

    How can I apply CSS to an HTML text input?

    How to load CSS using jquery

    How to use ASP.NET Authorization Yet Permit Access to .css Files?

    How do I set the background-image property to a linear gradient using jQuery's css method?

    how to apply transform rotate all browse in inline css using jquery

    How to stop a hovered list item's text from changing back to default when hovering over subnav

    How does Twitter put labels inside textboxes?

    How to apply css style when using ng-print inAngular JS

    How to change ol bullets for clickable images

    How to group CSS colors

    How to use css classes in Best way without redundant?

    CSS - how to overflow from div to full width of screen

    CSS - How to resize texboxes with background image when browser is resized?

    How can I convert to a CSS Drop down menu

    How do I get text to wrap to not break out of the box using CSS?

    How to hold a css style on hover

    How to pre-complie css style sheets in rails 2.3?

    How to reset the CSS of HTML Elements?

    How to Make Certain Phrases Appear on One Line Regardless of Screen Size

    how to prevent datepicker css from changing

    How to move the POV of an image when using overflow: hidden?

    HTML5 contenteditable div: show placeholder only if div has 1 child

    How can I make buttons flash different background colors when clicked/

    How can I make a Div that stays on its position?