How can I make a button change its position after being clicked?


Tags: javascript,html,css

Problem :

How can I make a button change its position after being clicked like this demo here but instead of the active parameter I would like it to be at margin-left:50px; definitely after clicked

HTML

<div class="button">
    <button type="fb-like">Fb-Like</button>
</div>

CSS

.button:active {
    margin-left:50px;
}
/* But with a on clicked parameter instead of active */


Solution :

You need to use JavaScript:

var d = document.getElementById("button");
d.addEventListener('click',function(){
    d.className = d.className + " move";
});

Demo: http://jsfiddle.net/LJHQW/3/

Or, if you're already using jQuery:

$('.button').click(function(){
    $(this).addClass('move');
});

Demo: http://jsfiddle.net/LJHQW/1/


    CSS Howto..

    Show Limited Data Using jquery

    How to style differently only the first list item from unsorted list

    How to make android app for existing dynamic website

    css nested classes, how to not repeat code?

    How to add the very last border on the sub menu items

    How to stop CSS Code Display:none for specific id or class?

    Compiling Bootstrap in LESS - How can I have a different navbar height for mobile?

    how to select all list items except for the first and last using CSS only?

    How to properly use css will-change property?

    How to make a webpage mobile friendly with css media queries

    How to set relative url for a css file in Django

    How do I center this menu?

    How can align css colums vertcally to the bottom?

    When and how to use !important CSS property in a bookmarklet with cross domains?

    How to deal with my sharepoint datetime control css?

    css: how to format contact entry screen

    How to make html table made by list responsive?

    How can I use CSS to keep content in its own column?

    How to fix parent hover issues with CSS?

    how to align bootstrap nav menu with another div?

    How to center part of a navbar

    How to fix layout to browser window without scroll

    How to insert a text-like element into document using javascript and CSS?

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    How to use CSS Background-size: cover; but leave space for menu?

    How to pre-load images only using CSS (no JS)?

    How to debug CSS bundled by Webpack?

    How to stop background layering with CSS?

    How to keep sub div from considering height of its cousin?

    Tab menu in CSS - how to set an active tab