<style>
/* -------Start-------- */
.btn{
display:inline-block;
overflow:hidden;
position:relative;
padding:15px 25px;
font-size:1.75rem;
color:#fff;
text-decoration:none;
letter-spacing:2px;
z-index:0;
background:#ffff;
-moz-transition: all 0.6s ease-out 0.0s;
-ms-transition: all 0.6s ease-out 0.0s;
-o-transition: all 0.6s ease-out 0.0s;
-webkit-transition: all 0.6s ease-out 0.0s;
transition: all 0.6s ease-out 0.0s;
}
.btn:after, .btn:before {-moz-transition: all 0.4s ease-out 0.0s;-ms-transition: all 0.4s ease-out 0.0s;-o-transition: all 0.4s ease-out 0.0s;-webkit-transition: all 0.4s ease-out 0.0s;transition: all 0.4s ease-out 0.0s;}
.btn + .btn { margin-left:25px;}
.border { border:solid 2px #000;}
.effect1:hover { background:#fff; color:#000}
.effect2:after{ z-index:-1; content:""; position:absolute; bottom:0; left:0; width:100%; height:0%; background:#fff}
.effect2:hover{ color:#000}
.effect2:hover:after { height:100%;}
.effect3:after{ z-index:-1; content:""; position:absolute; top:0; left:0; width:100%; height:0%; background:#fff}
.effect3:hover{ color:#000}
.effect3:hover:after { height:100%;}
.effect4:after{ z-index:-1; content:""; position:absolute; top:0; left:0; width:0%; height:100%; background:#fff}
.effect4:hover{ color:#000}
.effect4:hover:after { width:100%;}
.effect5:after{ z-index:-1; content:""; position:absolute; top:0; right:0; width:0%; height:100%; background:#fff}
.effect5:hover{ color:#000}
.effect5:hover:after {width:100%;}
.effect6:after{ z-index:-1; content:""; position:absolute; top:0; right:0; width:100%; height:0%; background:#fff}
.effect6:before{ z-index:-1; content:""; position:absolute; bottom:0; right:0; width:100%; height:0%; background:#fff}
.effect6:hover{ color:#000}
.effect6:hover:after { height:50%;}
.effect6:hover:before {height:50%;}
.effect7:hover{ color:#000}
.effect7:after { width:100%; height:100%; content:""; background:#fff; position:absolute; top:0; left:0; z-index:-1; transform:scale(1,0)}
.effect7:hover:after{transform:scale(1,1)}
.effect8:after{ z-index:-1; content:""; position:absolute; top:0; right:0; width:00%; height:100%; background:#fff}
.effect8:before{ z-index:-1; content:""; position:absolute; bottom:0; left:0; width:00%; height:100%; background:#fff}
.effect8:hover{ color:#000}
.effect8:hover:after { width:50%;}
.effect8:hover:before {width:50%;}
.effect9:hover{ color:#000}
.effect9:after { width:100%; height:100%; content:""; background:#fff; position:absolute; top:0; left:0; z-index:-1; transform:scale(0,1)}
.effect9:hover:after{transform:scale(1,1)}
.effect10:hover { box-shadow:0 0 0px 30px #fff inset; color:#000}
.effect11:hover { color:#000}
.effect11:after { width:100%; height:100%; content:""; background:#fff; position:absolute; top:0; left:0; z-index:-1; transform:scale(0)}
.effect11:hover:after{transform:scale(1)}
.effect12{ overflow:hidden}
.effect12:hover { color:#000}
.effect12:after { width:100%; height:100%; content:""; z-index:-1; background:#fff; position:absolute; top:150%; left:00%; z-index:-1; transform:skewY(20deg)}
.effect12:before { width:100%; height:100%; content:""; z-index:-1; background:#fff; position:absolute; bottom:150%; left:00%; z-index:-1; transform:skewY(20deg)}
.effect12:hover:after{ top:48%}
.effect12:hover:before{ bottom:48%}
/* -------End-------- */
/* -------Start-------- */
.bttn {
display: inline-block;
font-size:1.5rem;
}
.btn-box {
border: 1px solid #000;
padding: 1em 1em;
margin: 0 0.25em;
text-align: center;
box-shadow: 6px 6px 0px #000;
transition: box-shadow 0.3s ease-in-out;
&:hover {
box-shadow: 1px 1px 0px #000;
}
}
.btn-box--left {
box-shadow: -4px 4px 0px #000;
&:hover {
box-shadow: -1px 1px 0px #000;
}
}
/* -------End-------- */
/* -------Start-------- */
.btnn {
background: #e74c3c;
color: #fff;
text-decoration: none;
padding: 20px 60px;
font-family: sans-serif;
font-size: 20px;
border-radius: 3px;
box-shadow: 1px 1px 0px #c0392b, 2px 2px 0px #c0392b,3px 3px 0px #c0392b,4px 4px 0px #c0392b,5px 5px 0px #c0392b,6px 6px 0px #c0392b,7px 7px 0px #c0392b,8px 8px 0px #c0392b,9px 9px 0px #c0392b,10px 10px 0px #c0392b;
transition: 1s position;
}
.btnn:hover {
box-shadow: none;
transition: 1s position;
position: relative;
top: 10px;
left: 10px;
}
.btnn:active {
box-shadow: none;
transition: 1s position;
position: relative;
top: 10px;
left: 10px;
}
/* -------End-------- */
/* -------Start-------- */
.btton {
transition:all 0.3s ease;
display:inline-block;
overflow:hidden;
position:relative;
padding:15px 25px;
font-size:1.75rem;
color: #00193C;
border: 1px solid #00193C;
box-shadow: 1.5rem 1.5rem 0 0 #5B0080;
&:hover{
display:inline-block;
position:relative;
cursor: pointer;
/*rgin: .15rem 0 0 .15rem; */
/* der: none; */
border: 1px solid #00193C;
background: #5B0080;
color: white;
box-shadow: -1.5rem -1.5rem white;
}
}
/* -------End-------- */
/* -------Start-------- */
.bb{
border: 3px solid #000000;
background-color: transparent;
color: #0A3D5B;
padding: 15px 40px;
font-size: 18px;
font-weight: 500;
background: transparent;
cursor: pointer;
display: inline-block;
border-radius: 3px;
text-transform: capitalize;
}
.bb:focus {
outline: none;
}
/* slide hover left -1 css */
.bb.slide-hover-left-1 {
background-image: linear-gradient(0, #000, #000);
background-size: 0;
transition: .55s;
background-repeat: no-repeat;
}
.bb.slide-hover-left-1:hover {
background-size: 100%;
color: #fff;
}
/* slide hover left 2 css */
.bb.slide-hover-left-2 {
background-image: linear-gradient(0, #000, #000);
background-size: 0 0;
transition: .8s;
background-repeat: no-repeat;
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.bb.slide-hover-left-2:hover {
background-size: 100% 100%;
color: #fff;
}
/* slide hover left 3 css */
.bb.slide-hover-left-3 {
background-image: linear-gradient(0, #000, #000);
background-size: 0;
transition: .8s;
background-repeat: no-repeat;
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.bb.slide-hover-left-3:hover {
background-size: 100%;
color: #fff;
}
/* hover-center 1 css */
.bb.hover-center-1 {
background-image: linear-gradient(0, #000, #000);
background-size: 0;
transition: .8s;
background-repeat: no-repeat;
background-position: bottom;
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.bb.hover-center-1:hover {
background-size: 100%;
color: #fff;
}
/* hover-center-2 css */
.bb.hover-center-2 {
background-image: linear-gradient(0, #000, #000);
background-size: 0 0;
transition: .8s;
background-repeat: no-repeat;
background-position: center;
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.bb.hover-center-2:hover{
background-size: 100% 100%;
color: #fff;
}
/* -------End-------- */
/* -------Start-------- */
.bn{
margin:10px;
transition: 0.5s;
background:transparent;
min-height:50px;
min-width:100px;
font-size: 1.75rem;
}
.bn:hover{
color:#fff;
}
.btn1{
border:3px solid #ffa260;
color:#ffa260;
}
.btn1:hover{
box-shadow:inset 0px -4em 0px 0px #ffa260;
}
.btn2{
border:3px solid #19bc8b;
color:#19bc8b;
}
.btn2:hover{
box-shadow:inset 0 0 0 2em #19bc8b;
}
.btn3{
border:3px solid #a972cb;
color:#a972cb;
}
.btn3:hover{
box-shadow: inset -8.5em 0 0 0 #a972cb, inset 8.5em 0 0 0 #a972cb;
}
.btn4{
border:3px solid #1e92e0;
color:#1e92e0;
}
.btn4:hover{
box-shadow: inset 9em 4em 0 0 #1e92e0;
}
.btn5{
border:3px solid #fd4a4a;
color:#fd4a4a;
}
.btn5:hover{
box-shadow: 9px -9px 0px rgba(253, 74, 74, 0.95), -9px 9px 0px rgba(253, 74, 74, 0.95);
color:#fd4a4a;
}
/* -------End-------- */
</style>มีสินค้า: 51 รายการ.
<style>
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.8);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
cursor: pointer;
/*
margin: auto;
border-radius: 50%;
width: 150px;
height: 150px;
background: red;
*/
}
.text{
position: absolute;
top: 40%;
left: 50%;
font-size: 2.8rem;
font-weight: bold;
color: black;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
.badge.onsale {
color: white !important;
}
.woocommerce.products .badge {
background-color: var(--bricks-color-ircwjm); /*#a2253b */
border-radius: 4px;
font-size: 14px;
left: -10px;
line-height: 24px;
padding: 0 10px;
pointer-events: none;
position: absolute;
top: 10px;
z-index: 2
}
</style>
<style>
/* .woocommerce-pagination
.page-numbers
.current
.prev
.next
*/
:root {
--primary: #23adad;
--sed: #ffffff;
--grey: #cbe0dd;
--color1: #000000;
}
.brxe-pagination {
display: flex;
/*width: fit-content; */
}
.brxe-pagination ul {
gap: 5px !important;
}
.prev.page-numbers::after {
content: "";
}
.next.page-numbers::before {
content: "";
}
.page-numbers {
color : var(--sed);
background-color: var(--color1);
padding: 2px 8px;
display: grid;
place-items: center;
}
.page-numbers.current {
color : var(--color1);
background-color: var(--sed);
border: 1px inset #000;
}
.page-numbers > li > .dots {
display:none;
}
.page-numbers > li {
background-color: var(--sed);
}
.page-numbers > li :hover {
color : var(--color1);
background-color: var(--sed);
border: 1px inset #000;
}
.page-numbers > li:last-child {
background-color: var(--sed);
}
.brx-loading-animation {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
color:darkred;
}
</style>