如何在“单击”时更改/移动按钮位置答案

【问题标题】：How to change / move button position "when" clicked如何在“单击”时更改/移动按钮位置
【发布时间】：2019-01-24 21:56:57
【问题描述】：

我用 :active 设置我的按钮，以便在使用 margin-top 和 left 点击时移动它，但是每次我点击按钮时，上面的标题也会移动到顶部，它也会影响滚动条。如何只制作会移动的按钮？

然后，当我将margin-top添加到我的按钮div时，上面的标题也被推到了顶部，如何摆脱它所以只有按钮向下？

谢谢

这是我的代码：https://jsfiddle.net/arknmaulana/ktuvq9sb/6/

<body>
<div class="center" id="section01">
    <div>
        <h1>Journal Online</h1>
        <p>Untuk kamu yang masih pake jurnal analog</p>
    </div>
    <div>
        <button>GET STARTED</button>
    </div>
</div>

#section01 div:nth-child(2):active{
box-shadow: none;
margin-top: 110px;
margin-left: 10px;}

【问题讨论】：

标签： javascript html css

【解决方案1】：

您可以使用CSS transform property 移动按钮而不会弄乱布局：

#section01 div:nth-child(2):active{
    box-shadow: none;
    transform: translate(10px, 20px);
}

【讨论】：

也可以定义转场，设置动画类型和持续时间