Text Alignment Buttons with Effect

Written by @kerixa 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.

Code Snippet:

                                                
                                                <!-- this script is provided by https://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='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300