.spinner{display:flex;flex-direction:row;justify-content:center}.small-spinner{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:2px solid #3f3224;border-radius:70%;border-top-color:#00000000;display:inline-block;height:32px;width:32px}.screen-spinner{align-items:center;background:radial-gradient(#fffae4d6,#fffae48f);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:999}@keyframes spin{to{-webkit-transform:rotate(1turn)}}@-webkit-keyframes spin{to{-webkit-transform:rotate(1turn)}}.recs,.recs-block{align-items:center;display:flex;flex-direction:row;justify-content:center}.recs-block{background:#f7dbb6;border:2px solid #8d7a63;border-radius:7px;color:#392c2c;cursor:pointer;font-size:14px;font-weight:500;height:36px;margin-top:12px;position:relative}.recs-text{padding:0 14px 0 16px}.recs-close,.recs-text{align-items:center;display:flex;height:100%;justify-content:center}.recs-close{background:hsla(0,0%,50%,.06);border-radius:0 7px 7px 0;box-sizing:border-box;font-size:12px;padding:0 10px}.answers{flex-direction:column;max-height:350px;padding-top:15px}.answer-container,.answers,.result{display:flex;height:100%;width:100%}.answer-container,.result{align-items:center;background:#ffeacd82;border:2px solid #5e4f3db0;border-radius:14px;box-sizing:border-box;color:#392c2c;cursor:pointer;font-size:18px;font-weight:500;justify-content:center;margin:15px 0 0;max-height:80px;position:relative;text-align:center}.answer-container:active{opacity:.9}.answer-content{-webkit-animation:anim-answer-show .25s forwards;animation:anim-answer-show .25s forwards;padding:0 5px}.answer-correct{color:#1b5e3e}.answer-incorrect{color:#611313}.answer-hide{-webkit-animation:anim-answer-hide .25s forwards;animation:anim-answer-hide .25s forwards}@supports (-webkit-touch-callout:none){.answer-content,.answer-hide{-webkit-animation:none;animation:none}.answer-hide{-webkit-transform:scale(0);transform:scale(0)}}@media(max-height:800px){.answer-container,.result{margin:10px 0 0;padding:20px}.answer-container{padding:2px 20px}}@media(max-width:700px){.answers{max-height:45vh;padding-top:15px}.answer-container{font-size:15px;padding:2px 20px}}@media(max-height:600px){.answers{padding-top:5px}}@-webkit-keyframes anim-answer-hide{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(0);transform:scale(0)}}@keyframes anim-answer-hide{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(0);transform:scale(0)}}@-webkit-keyframes anim-answer-show{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes anim-answer-show{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}CSS Particle Button Generator

Save button
Load buttons
Click me
Share
Download Single
HTML-File
Reset to defaults :root{--buttonColor0:#ff7043;--buttonColor1:transparent;--buttonColor2:transparent;--buttonFontColor:#0e0e0e;--buttonFontSize:16px}body,html{height:100%;overflow:hidden;width:100%}body{align-content:space-around;align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.buttonWrap{height:400px;position:relative;width:400px;z-index:1}.menu{flex-direction:row;padding:10px 0 25px}.menu,.menu-item{align-items:center;display:flex;justify-content:center}.menu-item{background:linear-gradient(165deg,#ffd59c 50%,#ff85852e);border:2px solid #937856ca;border-radius:25px;box-sizing:border-box;color:#4f361f;cursor:pointer;font-size:16px;font-weight:500;margin-right:10px;padding:12px 26px;position:relative;text-align:center}.menu-item:last-child{margin-right:0}.rating-count{margin-left:15px}.question-num{padding-right:15px}.rank{-webkit-animation:rank-anim 3.5s forwards;animation:rank-anim 3.5s forwards;background:linear-gradient(165deg,#ffd59c 50%,#ff85852e);border:2px solid #a68b6b;border-radius:100px;bottom:-96%;box-sizing:border-box;color:#24190f;font-size:12px;left:0;margin:0 auto;padding:5px 12px;position:absolute;right:0;text-align:center;z-index:999}.delta-rank{opacity:.5;padding-left:5px}@-webkit-keyframes rank-anim{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}4%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}92%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.3);transform:scale(1.3)}}@keyframes rank-anim{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}4%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}92%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}to{opacity:0;-webkit-transform:scale(1.3);transform:scale(1.3)}}@media(max-width:740px){.menu{padding:5px 0 20px}.menu-item{font-size:15px;margin-right:8px;padding:10px 20px}.question-num{padding-right:10px}.rank{bottom:-110%}}@media(max-height:600px){.menu{padding:5px 0 15px}.menu-item{font-size:14px;margin-right:6px;padding:8px 18px}.question-num{padding-right:8px}.rating-count{margin-left:10px}.menu-item .icon{-webkit-transform:scale(.8);transform:scale(.8)}}.result{margin-top:20px;width:auto}.question{align-items:center;background:radial-gradient(#ffeacdad,#ffeacd42);border:2px dashed #392e21ca;border-radius:15px;color:#3e301d;display:flex;flex-direction:column;font-weight:500;height:100%;justify-content:center;margin:0;max-height:min(400px,40vh,55vw);overflow-y:auto;padding:10px 0;position:relative;text-align:center;width:100%}.question-img{-webkit-animation:question-img-anim 1s;animation:question-img-anim 1s;background:#00000015;border-radius:10px;height:auto;margin-top:20px;max-width:min(360px,40vh,55vw);width:100%}.question-text{-webkit-animation:answer_anim .15s linear;animation:answer_anim .15s linear;font-family:Roboto,sans-serif;font-size:22px;left:40px;text-align:center;width:calc(100% - 80px)}.text-s{font-size:20px}.question-layer{background:transparent;height:100%;left:0;position:absolute;top:0;width:100%}@supports (-webkit-touch-callout:none){.question-text{-webkit-animation:none;animation:none}}@-webkit-keyframes answer_anim{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes answer_anim{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@media(max-width:1000px){.question-text{font-size:20px;left:30px;width:calc(100% - 60px)}.text-s{font-size:18px}}@media(max-width:700px){.question{max-height:min(400px,30vh,42vw)}.question-text{font-size:18px;left:25px;width:calc(100% - 50px)}.text-s{font-size:16px}}@-webkit-keyframes question-img-anim{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes question-img-anim{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}button{align-items:center;background:linear-gradient(165deg,#ffd59c 50%,#ff858582);border:2px solid #ae9161;border-radius:14px;box-sizing:border-box;color:#362929;cursor:pointer;display:flex;font-family:Roboto;font-size:18px;font-weight:500;justify-content:center;margin:15px 0 0;max-height:70px;outline:none;padding:20px 0;position:relative;text-align:center;width:100%}@media(max-width:800px){button{font-size:16px;margin:12px 0 0;padding:15px 0}}body{--modal-header:20px;--modal-text:16px;--modal-border:2px solid #392e219d;--modal-padding:20px 30px;--modal-margin:20px;--modal-width:100%}.modal{align-items:center;display:flex;flex-direction:column;justify-content:center;position:fixed;z-index:999}.modal,.modal-shadow{height:100vh;left:0;top:0;width:100vw}.modal-shadow{background:#d7bf9eb5;cursor:pointer;position:absolute}.modal-container{background:#f1d9b8f2;border:var(--modal-border);border-radius:15px;border-radius:10px;box-sizing:border-box;font-size:var(--modal-text);margin:var(--modal-margin);max-height:calc(100vh - 100px);max-width:700px;overflow-y:auto;padding:var(--modal-padding);text-align:center;width:var(--modal-width);z-index:999}.modal-header{color:#000000d8;font-size:var(--modal-header);font-weight:500;margin-bottom:24px;text-align:center}@-webkit-keyframes modal_open_anim{0%{opacity:0;-webkit-transform:translateY(50vh) scale(0);transform:translateY(50vh) scale(0)}to{opacity:1;-webkit-transform:translate(0) scale(1);transform:translate(0) scale(1)}}@keyframes modal_open_anim{0%{opacity:0;-webkit-transform:translateY(50vh) scale(0);transform:translateY(50vh) scale(0)}to{opacity:1;-webkit-transform:translate(0) scale(1);transform:translate(0) scale(1)}}@-webkit-keyframes modal_close_anim{0%{opacity:1;-webkit-transform:translate(0) scale(1);transform:translate(0) scale(1)}to{opacity:0;-webkit-transform:translateY(50vh) scale(0);transform:translateY(50vh) scale(0)}}@keyframes modal_close_anim{0%{opacity:1;-webkit-transform:translate(0) scale(1);transform:translate(0) scale(1)}to{opacity:0;-webkit-transform:translateY(50vh) scale(0);transform:translateY(50vh) scale(0)}}@media(max-width:700px){body{--modal-header:17px;--modal-text:14px;--modal-border:3px solid #392e219d;--modal-padding:16px 28px;--modal-margin:18px;--modal-width:calc(100% - 56px)}}@media(max-width:500px){body{--modal-header:16px;--modal-text:13px;--modal-border:3px solid #392e219d;--modal-padding:15px 25px;--modal-margin:16px;--modal-width:calc(100% - 50px)}}@media (orientation:landscape) and (max-height:500px){body{--modal-header:16px;--modal-text:12px;--modal-border:2px solid #392e219d;--modal-padding:10px 20px;--modal-margin:15px;--modal-width:calc(100% - 40px)}}.rating{background:#ffe5c1;border:2px solid #8f7756c1;border-radius:15px;height:calc(100% - 120px);margin-bottom:15px;max-height:800px;padding:25px 0}.rating,.rating_in{position:relative;width:100%}.rating_in{box-sizing:border-box;height:100%;overflow-y:auto;padding:0 35px}.top{margin-bottom:10px}@media(max-width:1000px) or (max-height:1000px){.rating{margin-bottom:10px;padding:18px 0}.rating_in{padding:0 30px}}@media(max-width:700px){.rating{height:calc(100% - 160px);margin-bottom:10px;padding:15px 0}.rating_in{padding:0 30px}}@media(max-width:500px){.rating{margin-bottom:10px;padding:15px 0}.rating_in{padding:0 22px}}body{--rating-item-text:15px;--rating-item-padding:10px 0;--rating-avatar-size:50px}.rating-item{color:#6e5c44;font-family:Roboto;font-size:var(--rating-item-text);font-weight:500;justify-content:space-between;padding:var(--rating-item-padding)}.rating-item,.rating-item-left{align-items:center;display:flex;flex-direction:row}.rating-avatar{position:relative}.rating-badge{background:#8a714d;border-radius:20px;bottom:0;color:#fff;font-size:11px;font-weight:600;padding:4px 7px;position:absolute;right:-10%}.rating-name{margin-left:25px;padding-right:10px}.rating-img{border-radius:100%;height:var(--rating-avatar-size);width:var(--rating-avatar-size)}.rating-user{background:#ffe5c1;border-radius:0;bottom:-5px;font-weight:500;position:-webkit-sticky;position:sticky}.rating-user .rating-img{border:2px solid #8a714d;box-sizing:border-box}.rating-user .rating-badge{background:#8a714d}@media(max-width:1000px){body{--rating-item-text:15px;--rating-item-padding:10px 0;--rating-avatar-size:48px}}@media(max-width:700px) or (max-height:700px){body{--rating-item-text:14px;--rating-item-padding:8px 0;--rating-avatar-size:46px}}@media(max-width:500px){body{--rating-item-text:13px;--rating-item-padding:8px 0;--rating-avatar-size:42px}}@media (orientation:landscape) and (max-height:500px){body{--rating-item-text:13px;--rating-item-padding:7px 0;--rating-avatar-size:38px}}.stats-item{align-items:center;-webkit-animation:stats-anim .35s;animation:stats-anim .35s;display:flex;flex-direction:row;font-size:15px;justify-content:space-between;padding:14px 0}@-webkit-keyframes stats-anim{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes stats-anim{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@media(max-width:700px){.stats-item{font-size:15px;padding:10px 0}}@media(max-width:500px){.stats-item{font-size:14px}}.group{background:#ffeacd82;border:2px dashed #392e21ca;border-radius:15px;box-sizing:border-box;color:#392c2c;height:calc(100% - 120px);margin-bottom:15px;max-height:800px;overflow-y:auto;padding:25px 30px;position:relative;width:100%}@media(max-width:1000px){.group{border:2px dashed #392e21ca;margin-bottom:10px;padding:25px}}@media(max-width:600px){.group{border:2px dashed #392e21ca;margin-bottom:10px;padding:22px}}@media(max-width:500px){.group{border:2px dashed #392e21ca;margin-bottom:10px;padding:20px}}.header{font-size:17px;font-weight:500;margin:12px 0 20px}.row_cell{border-radius:10px;color:#392c2c;cursor:pointer;flex-direction:row;font-size:16px;font-weight:400;height:50px;justify-content:space-between;padding:0;position:relative}.row_cell,.row_cell_before{align-items:center;display:flex}.row_cell_before{padding-right:25px}.row_cell_left{align-items:center;display:flex;flex-direction:row}.row_cell_name{font-weight:500}.point{-webkit-animation:anim_point .15s forwards;animation:anim_point .15s forwards;border-radius:100%;height:5px;position:absolute;width:5px}@-webkit-keyframes anim_point{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:0;-webkit-transform:scale(10);transform:scale(10)}}@keyframes anim_point{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:0;-webkit-transform:scale(10);transform:scale(10)}}@media(max-width:1000px){.row_cell{font-size:16px}}@media(max-width:700px){.row_cell{font-size:15px}}@media(max-width:500px){.row_cell{font-size:14px}}input,textarea{background:#f1d8b8;border:2px solid #7e6e59;border-radius:15px;box-sizing:border-box;color:#4f361f;font-family:inherit;font-size:16px;font-weight:500;height:100px;margin-top:15px;outline:none;padding:15px 20px;width:100%}input{height:60px}textarea::-webkit-input-placeholder{color:#4f361f}textarea::placeholder{color:#4f361f}.checkbox{position:relative}.checkbox_particle{-webkit-animation:anim_checkbox_particle .5s forwards;animation:anim_checkbox_particle .5s forwards;background:#645757;border-radius:100%;height:50px;left:-15px;position:absolute;top:-15px;width:50px}@-webkit-keyframes anim_checkbox_particle{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:0;-webkit-transform:scale(1);transform:scale(1)}}@keyframes anim_checkbox_particle{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:0;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes anim_checkbox{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes anim_checkbox{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@media(max-width:1000px){.checkbox svg{height:20px;width:20px}}@media(max-width:700px){.checkbox svg{height:18px;width:18px}}@media(max-width:500px){.checkbox svg{height:18px;width:18px}}*{-webkit-tap-highlight-color:#00000000;-webkit-touch-callout:none;margin:0;-webkit-user-select:none;user-select:none}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:#00000000}::-webkit-scrollbar-thumb{background:#af9573;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#555}body{color:#fff;font-family:sans-serif;font-family:Roboto,sans-serif;overflow-x:hidden}#root{background:radial-gradient(#d9c1a2d2,transparent);overflow-y:auto}h1{font-weight:600}.test-container{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;height:100vh;justify-content:center;margin:0 auto;max-width:720px;padding:10px 10px 25px;position:relative;width:100vw}@media(max-width:800px){::-webkit-scrollbar{width:0}.test-container{padding:2px 20px}}@media(max-height:420px){.test-container{justify-content:start}}