It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Written by 30 March 2021
On websites that usually have a textarea or use a text editor, there is a text sorting section and alignment buttons. In the following code such buttons are provided with dynamic effect on click. The lines that express the text alignment move with an animation and give a special beauty to your text editor. These animating buttons are Justify, Left, Right, and Middle aligments.
<!-- this script is provided by http://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f2f2f2;
}
.container {
padding: 22px 32px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.011), 0 6px 8px rgba(0, 0, 0, 0.016), 0 12px 16px rgba(0, 0, 0, 0.02), 0 24px 32px rgba(0, 0, 0, 0.024);
}
.track {
position: relative;
display: flex;
}
label {
width: 50px;
height: 43px;
border-radius: 6px;
transition: 0.3s ease-in-out;
cursor: pointer;
}
label:hover {
background-color: #fafafa;
}
label:not(:first-of-type) {
margin-left: 16px;
}
.sr-only {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
input[type=radio] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
input[type=radio]:focus-visible + label {
box-shadow: 0 0 0 2px #ccc;
background-color: #f8f8f8;
}
.left, .center, .right, .justify {
position: relative;
}
.left::after, .left::before, .center::after, .center::before, .right::after, .right::before, .justify::after, .justify::before {
content: "";
position: absolute;
height: 4px;
background-color: #d1d1d1;
border-radius: 2px;
}
.left::after, .center::after, .right::after, .justify::after {
top: 9px;
left: 8px;
width: 34px;
box-shadow: 0 10px 0 0 #d1d1d1;
}
.left::before, .center::before, .right::before, .justify::before {
top: 29px;
width: 16px;
}
.left::before {
left: 8px;
}
.center::before {
left: 17px;
}
.right::before {
left: 26px;
}
.justify::before {
left: 8px;
width: 34px;
}
.marker {
position: absolute;
height: 4px;
width: 34px;
background-color: #333;
border-radius: 2px;
left: 8px;
transition: 0.42s cubic-bezier(0.32, 0.07, 0.64, 1.1);
}
.marker:nth-of-type(1) {
top: 9px;
}
.marker:nth-of-type(2) {
top: 19px;
transition-delay: 0.06s;
}
.marker:nth-of-type(3) {
top: 29px;
width: 16px;
transition-delay: 0.12s;
}
.radio-center:checked ~ .marker {
transform: translateX(66px);
}
.radio-center:checked ~ .marker:nth-of-type(3) {
left: 17px;
}
.radio-right:checked ~ .marker {
transform: translateX(132px);
}
.radio-right:checked ~ .marker:nth-of-type(3) {
left: 26px;
}
.radio-justify:checked ~ .marker {
transform: translateX(198px);
}
.radio-justify:checked ~ .marker:nth-of-type(3) {
left: 8px;
width: 34px;
}
</style>
<div class="container">
<div class="track">
<input class="radio-left" type="radio" id="left" name="alignment" checked="checked"/>
<label class="left" for="left"><span class="sr-only">Align left</span></label>
<input class="radio-center" type="radio" id="center" name="alignment"/>
<label class="center" for="center"><span class="sr-only">Align center</span></label>
<input class="radio-right" type="radio" id="right" name="alignment"/>
<label class="right" for="right"><span class="sr-only">Align right</span></label>
<input class="radio-justify" type="radio" id="justify" name="alignment"/>
<label class="justify" for="justify"><span class="sr-only">Justify</span></label>
<div class="marker"></div>
<div class="marker"></div>
<div class="marker"></div>
</div>
</div><a target='_blank' href='http://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!