Html Code: Text Alignment Buttons with Effect

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 got from www.htmlbestcodes.com - Coded by: Krishna Eydat -->
<style>
body {
    height: 90vh;
    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="https://www.htmlbestcodes.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">HTML Best Codes</a>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Html Best Codes

Html Code: Text Alignment Buttons with Effect

Links