css textarea limit
<textarea maxlength="20"></textarea>
<!-- limits the maximum input length up to 20 characters -->
css textarea limit
<textarea maxlength="20"></textarea>
<!-- limits the maximum input length up to 20 characters -->
css pearls
<div class="container">
<div id="traffic-light-pearls-glossy-effect" class="row col-12 mx-0 border border-secondary" style="height: 50%">
<div class="col-4 p-0 mx-0 d-flex justify-content-center align-items-center"><button type="button" class="traf_light embossed btn-danger rounded-circle btn-xl" style="height:50px;width:50px"></button></div>
<div class="col-4 p-0 mx-0 d-flex justify-content-center align-items-center"><button type="button" class="traf_light embossed btn-warning rounded-circle btn-xl" style="height:50px;width:50px"></button></div>
<div class="col-4 p-0 mx-0 d-flex justify-content-center align-items-center"><button type="button" class="traf_light embossed btn-success rounded-circle btn-xl" style="height:50px;width:50px"></button></div>
</div>
</div>
.traf_light{
border: none;
}
.embossed {
position: relative;
z-index: 2;
}
.embossed:before {
content: "";
display: block;
height: 106%;
width: 106%;
position: absolute;
border-radius: 50%;
top: -3%;
bottom: 3%;
right: 6%;
left: 50%;
transform: translateX(-50%);
border-radius: 100%;
opacity: 0.6;
background: radial-gradient(closest-side, #ffffff,#484848,#0d0d0d );
}
.embossed:after {
content: "";
z-index: -1;
position: absolute;
border-radius: 50%;
box-shadow:
inset 0 2px 0 rgba(0,0,0,0.1),
inset 0 -2px 0 rgba(255,255,255,0.3);
top: -10px; bottom: -10px;
right: -10px; left: -10px;
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
}
Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us