アニメーションをまとめます。
チェックボックス
チェックマークがいい感じにつく
<inputtype="radio"name="test"id="test1"><labelfor="test1">チェックボックス</label>input[type="radio"]{display:none;}input[type="radio"]+label{display:block;position:relative;padding-left:25px;margin-bottom:0px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}input[type="radio"]+label:last-child{margin-bottom:0;}input[type="radio"]+label:before{content:'';display:block;width:15px;height:15px;border:1pxsolid#6cc0e5;position:absolute;left:0;top:3px;opacity:.8;-webkit-transition:all.12s,border-color.08s;transition:all.12s,border-color.08s;}input[type="radio"]:checked+label:before{width:10px;top:-1px;left:5px;border-radius:0;opacity:1;border-top-color:transparent;border-left-color:transparent;-webkit-transform:rotate(45deg);transform:rotate(45deg);}ツールチップ
text.blade.php
<buttontype="button"class="btn--circle btn--circle-c btn--shadow tooltip1 bookshelf_store_js"data-id="{{ $novel->id }}"><iclass="fas fa-book-medical"></i><divclass="tooltip_content">本棚に追加</div></button>text.scss
//ツールチップ.tooltip1{position:relative;cursor:pointer;display:inline-block;i{margin:0;padding:0;}&.tooltip_content{display:none;position:absolute;margin:1.5em0;padding:7px10px;min-width:120px;max-width:100%;color:#555;font-size:0.9rem;background:#FFF;border:solid2px$border_color;box-sizing:border-box;box-shadow:1px1px5px$border_color;z-index:2;&:before{content:"";position:absolute;top:-24px;left:50%;margin-left:-15px;border:12pxsolidtransparent;border-bottom:12pxsolid#FFF;z-index:2;}&:after{content:"";position:absolute;top:-30px;left:50%;margin-left:-17px;border:14pxsolidtransparent;border-bottom:14pxsolid$border_color;z-index:1;}}&:hover.tooltip_content{display:inline-block;top:35px;left:-40px;}}