右側浮動按鈕
連接起來
/*社群工具*/
.sticky-container.active {
opacity: 1;
pointer-events: auto;
}
.sticky-container {
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
position: fixed;
right: 0px;
bottom: 150px;
z-index: 999999 !important;
visibility: visible;
transition: all 0.5s cubic-bezier(0, 0, 0.18, 1);
text-decoration: none;
text-align: center;
}
.sticky-container [class*="sticky--"] {
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
position: relative;
width: 54px;
height: 54px;
margin-top: 0px !important;;
border-radius: 0%;
border: 0px !important;
background-color: #3552a1;
opacity: 1;
color: #fff;
font-size: 12px;
line-height: 1.33em;
cursor: pointer;
transition: all 0.3s cubic-bezier(0, 0, 0.18, 1);
z-index: 999999 !important;
}
a a:hover {
text-decoration: none;
}
.sticky-container [class*="sticky--"]:hover {
opacity: 0.8;
}
/*scroll to top 樣式*/
@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
display: block !important;
}}
#scroll-top-link{
right: 0px;
border-radius: 10px 0px 0px 10px;
}
圓形
/*社群工具*/
.sticky-container.active {
opacity: 1;
pointer-events: auto;
}
@media only screen and (max-width: 767px){
.sticky-container.active {
bottom: 75px;
right: 20px;
}
}
.sticky-container {
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
position: fixed;
right: 20px;
bottom: 70px;
z-index: 9999;
visibility: visible;
transition: all 0.5s cubic-bezier(0, 0, 0.18, 1);
text-decoration: none;
text-align: center;
}
.sticky-container [class*="sticky--"] {
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
position: relative;
width: 54px;
height: 54px;
margin-top: 6px;
border-radius: 50%;
opacity: 1;
color: #fff;
font-size: 12px;
line-height: 1.33em;
cursor: pointer;
transition: all 0.3s cubic-bezier(0, 0, 0.18, 1);
z-index: 9999;
}
a a:hover {
text-decoration: none;
}
.sticky-container [class*="sticky--"]:hover {
opacity: 0.8;
}
@media only screen and (max-width: 767px) {
.sticky-container {
right: 50px;
bottom: 110px;
}
}
@media only screen and (max-width: 767px) {
.sticky-container [class*="sticky--"] {
opacity: 0.8;
width: 50px;
height: 50px;
}
}
