This question already has answers here:
Circle with two borders
(4 answers)
Closed 3 months ago.
I have a CSS style for a button. I don’t know how to do it. I think it’s a bit too complicated and it’s not easy to make responsive adjustments. I would like to ask everyone how to write a button like this in CSS? thanks
.save_coin {
display: inline-block;
position: relative;
z-index: 3;
}
.save_coin::after {
content: "";
display: inline-block;
position: absolute;
background: #222;
border-radius: 32px;
padding: 26px 101px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#media (max-width: 768px) {
.save_coin::after {
border-radius: 38px;
padding: 38px 102px;
}
}
.save_coin span {
display: inline-block;
font-weight: 500;
text-align: center;
background: #222;
color: #fff;
padding: 12px;
border-radius: 32px;
position: relative;
z-index: 2;
border: 1px solid #fff;
width: 192px;
}
#media (max-width: 768px) {
.save_coin span {
width: auto;
font-size: 24px;
font-weight: 700;
padding: 15px 46px;
}
}
.save_coin:hover span {
color: #222;
background-color: #fff;
}
<span>ｓａｖｅ</span>
I think you can use outline attribute, work pretty good imo.
button {
padding: 10px 30px;
border-radius: 50px;
border: 2px solid white;
background-color: black;
color: white;
outline: 2px solid black;
}
button:hover {
background-color: white;
color: black;
}
<button>save</button>
You could try the box-shadow CSS property:
button {
cursor: pointer;
outline: none;
font-size: 30px;
/* 👇 outer line */
border: 5px solid black;
/* some very large number, to get a pill effect */
border-radius: 1024px;
padding: 30px 60px 30px 60px;
background: black;
color: white;
/* 👇 inner white line */
box-shadow: inset 0 0 0 3px white;
/* custom transition */
transition: 0.3s ease;
}
/* ignore this if you just want button design */
button:hover {
background: white;
color: black;
}
<button type="button">立即儲值</button>
Long story short, I have an issue on one of my webpages footers.
It is NOT showing the social icons I have.
Funny thing, the social icons show, and work perfectly on any other page.
The CSS is the same throughout, the HTML is the same throughout.
I have used the devtools and nothing looks like it is taking precedence over anything, so here I am, at a loss.
I have attached screenshots of what should be there, and what isnt there, along with the code.
What it should look like (and does on all other pages
What it looks like now
HTML code (all the same throughout every page)
CSS code. Same throughout all the pages
Page CSS with missing icons
/* --------------------PACKAGES PAGE STYLING SECTION-------------------- */
/* ----------------------------------------------------------------- */
:root {
--main-tan-color: #CCE6F4;
--brown-btns: #FBFF12;
--header: #FF206E;
--footer: #FF206E;
--recommended: #FF206E;
--white: #fff;
--black: #000;
--grey-text: rgb(82, 82, 82);
--free-plan: #FBFF12;
--blue-color: #41EAD4;
}
/* ----- Packages Header ----- */
.packages_header {
font-size: 5em;
text-align: center;
margin-top: 10%;
text-shadow: 3px 3px 3px grey;
}
/* ----- Packages Main Section ----- */
.main-section {
padding-top: 2rem;
}
.background {
background-image: url(../images/plans-background.jpg);
width: 100vw;
height: 100vh;
position: fixed;
z-index: -1;
opacity: 0.5;
}
.package {
width: 80%;
margin: 1rem 0;
border: 3px solid var(--black);
border-left: none;
}
.package-badge {
position: absolute;
z-index: 3;
top: -35px;
right: 6.5rem;
font-size: 2.2rem;
color: var(--black);
background-color: var(--free-plan);
padding: 0.6rem;
border-radius: 10px;
border: 1px solid var(--black);
}
/* ----- Packages Hover Affects ----- */
.package:hover,
.package:active {
box-shadow: 3px 3px 5px grey;
border-color: var(--black);
}
.package a {
text-decoration: none;
color: inherit;
display: block;
padding: 2rem;
}
.package-subtitle {
color:var(--grey-text);
}
.package-info {
padding: 1rem;
border: 1px solid var(--black);
font-size: 1.25rem;
color:rgb(56, 56, 56);
background-color: var(--white);
}
#plus {
background-color: var(--recommended);
position: relative;
opacity: 0.9;
border-radius: 0px 15px 15px 0px;
margin-top: 15%;
}
#free {
background-color: var(--free-plan);
float: right;
border-right: none;
border-left: 3px solid var(--black);
text-align: right;
opacity: 0.9;
border-radius: 15px 0px 0px 15px;
margin-top: 5%;
}
#free:hover {
box-shadow: -3px 3px 5px grey;
border-color: var(--black);
/* transform: scale(1.06); */
}
.clearfix {
clear: both;
}
#premium {
background-color: var(--blue-color);
opacity: 0.9;
border-radius: 0px 15px 15px 0px;
margin-bottom: 15%;
margin-top: 5%;
}
.package-title {
padding-bottom: 1.25rem;
}
#premium .package-title {
color: var(--black);
}
#premium .package-subtitle {
color:var(--grey-text);
}
.footer-img {
opacity: 0.9;
}
If you want to see all the code for the entire project, I have it uploaded to my [github].(https://www.github.com/ab1820) under the "uHost" repository.
I am wondering if there is something in this CSS that is not allowing the icons to show?
I have tried the position elements, z-index, removing the footer background color, background image of the page, and I am just so lost!
For Web App i use:
function doGet(e) {
const lock = LockService.getDocumentLock();
if (lock.tryLock(350000)) {
try {
var ssId = e.parameter.spreadsheetId;
if (!ssId) return ContentService.createTextOutput("No spreadsheet ID.");
var first_sheet = SpreadsheetApp.openById(ssId);
var first_sheet_page = first_sheet.getSheetByName('test');
var second_sheet = SpreadsheetApp.openById('1qv-snObrAouKS3UdVYh8Dh34l_WqvF3O3eLw_57ZgSI');
var second_sheet_page = second_sheet.getSheetByName('test');
var r = 1;
while (second_sheet_page.getRange(r, 3).getValue()) {
r++;
}
second_sheet_page.getRange(r, 3).setValue(first_sheet_page.getRange(1, 1).getValue());
} catch (e) {
return ContentService.createTextOutput(e.message);
} finally {
lock.releaseLock();
return ContentService.createTextOutput("Done");
}
} else {
return ContentService.createTextOutput("Timeout");
}
}
To activate the Web App i use:
function vantagem() {
const srcSpreadsheetId = '1qv-snObrAouKS3UdVYh8Dh34l_WqvF3O3eLw_57ZgSI';
const webAppsUrl = "https://script.google.com/macros/s/AKfycbztVyl14tP_Hm4rUdBpl7aiwEHZQP9A7CR67CHtnjMLZG2vCY87/exec";
const res = UrlFetchApp.fetch(webAppsUrl + "?spreadsheetId=" + srcSpreadsheetId);
console.log(res.getContentText());
}
When I click to run the code, the Web App is not activated.
But when I paste the URL https://script.google.com/macros/s/###/exec?spreadsheetId=############# directly into the browser and press ENTER, the message Done appears showing that the Web App is activated.
What is happening that via script does not activate but via browser runs ok?
My spreadsheet with two scripts, Web App and Send to Web App:
https://docs.google.com/spreadsheets/d/1qv-snObrAouKS3UdVYh8Dh34l_WqvF3O3eLw_57ZgSI/edit?usp=sharing
Configs Web App:
What appears on the script execution page and console.log(res.getContentText()) is:
Output register too large. Output truncation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=300, initial-scale=1" name="viewport">
<meta name="google-site-verification" content="LrdTUW9psUAMbh4Ia074-BPEVmcpBxF6Gwf0MSgQXZs">
<title>Sign in - Google Accounts</title>
<style>
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: url(//fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
}
</style>
<style>
h1, h2 {
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0;
}
#-webkit-keyframes fontfix {
from {
opacity: 1;
}
to {
opacity: 1;
}
}
</style>
<style>
html, body {
font-family: Arial, sans-serif;
background: #fff;
margin: 0;
padding: 0;
border: 0;
position: absolute;
height: 100%;
min-width: 100%;
font-size: 13px;
color: #404040;
direction: ltr;
-webkit-text-size-adjust: none;
}
button,
input[type=button],
input[type=submit] {
font-family: Arial, sans-serif;
font-size: 13px;
}
a,
a:hover,
a:visited {
color: #427fed;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font-size: 20px;
color: #262626;
margin: 0 0 15px;
font-weight: normal;
}
h2 {
font-size: 14px;
color: #262626;
margin: 0 0 15px;
font-weight: bold;
}
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=url] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
display: inline-block;
height: 36px;
padding: 0 8px;
margin: 0;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
font-size: 15px;
color: #404040;
}
input[type=email]:hover,
input[type=number]:hover,
input[type=password]:hover,
input[type=tel]:hover,
input[type=text]:hover,
input[type=url]:hover {
border: 1px solid #b9b9b9;
border-top: 1px solid #a0a0a0;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=text]:focus,
input[type=url]:focus {
outline: none;
border: 1px solid #4d90fe;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
input[type=checkbox],
input[type=radio] {
-webkit-appearance: none;
display: inline-block;
width: 13px;
height: 13px;
margin: 0;
cursor: pointer;
vertical-align: bottom;
background: #fff;
border: 1px solid #c6c6c6;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
input[type=checkbox]:active,
input[type=radio]:active {
background: #ebebeb;
}
input[type=checkbox]:hover {
border-color: #c6c6c6;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input[type=radio] {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
width: 15px;
height: 15px;
}
input[type=checkbox]:checked,
input[type=radio]:checked {
background: #fff;
}
input[type=radio]:checked::after {
content: '';
display: block;
position: relative;
top: 3px;
left: 3px;
width: 7px;
height: 7px;
background: #666;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
input[type=checkbox]:checked::after {
content: url(https://ssl.gstatic.com/ui/v1/menu/checkmark.png);
display: block;
position: absolute;
top: -6px;
left: -5px;
}
input[type=checkbox]:focus {
outline: none;
border-color: #4d90fe;
}
.stacked-label {
display: block;
font-weight: bold;
margin: .5em 0;
}
.hidden-label {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
height: 0px;
width: 0px;
overflow: hidden;
visibility: hidden;
}
input[type=checkbox].form-error,
input[type=email].form-error,
input[type=number].form-error,
input[type=password].form-error,
input[type=text].form-error,
input[type=tel].form-error,
input[type=url].form-error {
border: 1px solid #dd4b39;
}
.error-msg {
margin: .5em 0;
display: block;
color: #dd4b39;
line-height: 17px;
}
.help-link {
background: #dd4b39;
padding: 0 5px;
color: #fff;
font-weight: bold;
display: inline-block;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
text-decoration: none;
position: relative;
top: 0px;
}
.help-link:visited {
color: #fff;
}
.help-link:hover {
color: #fff;
background: #c03523;
text-decoration: none;
}
.help-link:active {
opacity: 1;
background: #ae2817;
}
.wrapper {
position: relative;
min-height: 100%;
}
.content {
padding: 0 44px;
}
.main {
padding-bottom: 100px;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
zoom:1;
}
.google-header-bar {
height: 71px;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
}
.header .logo {
background-image: url(https://ssl.gstatic.com/accounts/ui/logo_1x.png);
background-size: 116px 38px;
background-repeat: no-repeat;
margin: 17px 0 0;
float: left;
height: 38px;
width: 116px;
}
.header .logo-w {
background-image: url(https://ssl.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_112x36dp.png);
background-size: 112px 36px;
margin: 21px 0 0;
}
.header .secondary-link {
margin: 28px 0 0;
float: right;
}
.header .secondary-link a {
font-weight: normal;
}
.google-header-bar.centered {
border: 0;
height: 108px;
}
.google-header-bar.centered .header .logo {
float: none;
margin: 40px auto 30px;
display: block;
}
.google-header-bar.centered .header .secondary-link {
display: none
}
.google-footer-bar {
position: absolute;
bottom: 0;
height: 35px;
width: 100%;
border-top: 1px solid #e5e5e5;
overflow: hidden;
}
.footer {
padding-top: 7px;
font-size: .85em;
white-space: nowrap;
line-height: 0;
}
.footer ul {
float: left;
max-width: 80%;
min-height: 16px;
padding: 0;
}
.footer ul li {
color: #737373;
display: inline;
padding: 0;
padding-right: 1.5em;
}
.footer a {
color: #737373;
}
.lang-chooser-wrap {
float: right;
display: inline;
}
.lang-chooser-wrap img {
vertical-align: top;
}
.lang-chooser {
font-size: 13px;
height: 24px;
line-height: 24px;
}
.lang-chooser option {
font-size: 13px;
line-height: 24px;
}
.hidden {
height: 0px;
width: 0px;
overflow: hidden;
visibility: hidden;
display: none !important;
}
.banner {
text-align: center;
}
.card {
background-color: #f7f7f7;
padding: 20px 25px 30px;
margin: 0 auto 25px;
width: 304px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.card > *:first-child {
margin-top: 0;
}
.rc-button,
.rc-button:visited {
display: inline-block;
min-width: 46px;
text-align: center;
color:
From your question, I confirmed as follows.
From But when I paste the URL https://script.google.com/macros/s/###/exec?spreadsheetId=############# directly into the browser and press ENTER, the message Done appears showing that the Web App is activated., it is considered that your Web Apps is correctly deployed.
From When I click to run the code, the Web App is not activated., when you run the script of Spreadsheet1() by clicking a button assigned to the function, the script of Web Apps is not run.
From the above situation, I would like to propose the following confirmation.
Please confirm the setting of your Web Apps, again. From your situation, I thought that the following setting might be suitable.
Execute as is Me.
Who has access is Anyone.
If Who has access is not Anyone, it is required to access the Web Apps using the access token. In this case, when you access Web Apps by your browser under logging into Google, the script of Web Apps is run. On the other hand, when you run the script, the script of Web Apps is not run. Because the access token is required to be used. I'm worried about this.
After you confirm your setting as the above, please reflect your latest script and setting to your Web Apps again. (It's just in case.)
Added 1:
As the additional information, when the access token is used for the client script, it becomes as follows.
Modified script:
But in this case, please test this script by you who is the owner of your Web Apps.
function vantagem() {
const srcSpreadsheetId = '###';
const webAppsUrl = "https://script.google.com/macros/s/###/exec";
const headers = { authorization: "Bearer " + ScriptApp.getOAuthToken() };
const res = UrlFetchApp.fetch(webAppsUrl + "?spreadsheetId=" + srcSpreadsheetId, { headers });
console.log(res.getContentText());
// DriveApp.getFiles() // This is used for automatically detecting the scope for using Web Apps.
}
Added 2:
From OP's reply of I found the problem. Instead of Anyone, it has to be Anyone, even anonymous, I understood that you had used the classic editor.
For classic editor
Who has access to the app: Anyone, even anonymous
For new editor
Who has access to the app: Anyone
These are the same situation.
I have created a custom dropdown box which can be seen here: JSFIDDLE.
The lay-out is just what I wanted and within Chrome and Firefox it works perfectly. But the problems lies within IE (11,10,9,8). When you try to click on the blue arrow nothing happens. While if you click on the blue arrow in Chrome or Firefox the dropdown will open. I tried using several CSS IE hacks but with no success. Can anyone tell me if this can be fixed?
My CSS:
select\9 {
display: none;
}
select::-ms-expand {
display: none;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
text-overflow: '';
/* this is important! */
}
.custom-select {
position: relative;
overflow: hidden;
border: 1px solid #cacaca;
background-color: #fff;
border-radius: 2px;
box-shadow: inset 0 1px 1px 1px rgba(204, 204, 204, .4);
color: #0085c8;
width:200px;
}
.custom-select:after {
background-color: #fff;
border-left: 1px solid #cacaca;
content: "\25bc";
display: block;
font-size: 1em;
line-height: 1em;
padding: 11px 13px 11px 11px;
position: absolute;
right: 13px;
text-align: center;
top: 3%;
width: 0;
z-index: 2;
box-sizing: inherit;
height:100%;
/* IE */
line-height: 3em\9;
padding: 0px 13px 0px 11px\9;
right: 0px\9;
width: 10px\9;
z-index: 4\0;
}
.custom-select select {
background: 0 0;
height: 80%;
outline: 0;
width: 100%;
width: 180%\9;
font-size: 14px;
line-height:1.1em;
border: 0;
border-radius: 0;
padding: 9px 38px 9px 10px;
position: relative;
z-index: 3;
color: #0085c8;
overflow:hidden;
}
Change the CSS for .custom-select:after to match the following:
.custom-select:after {
background-color: #fff;
border-left: 1px solid #cacaca;
content: "\25bc";
display: block;
font-size: 1em;
line-height: 1em;
padding: 11px 13px 11px 11px;
position: absolute;
right: 13px;
text-align: center;
top: 3%;
width: 0;
z-index: 2;
box-sizing: inherit;
height:100%;
/* IE */
line-height: 3em\9;
padding: 0px 13px 0px 11px\9;
right: 0px\9;
width: 10px\9;
z-index: 1;
}
I am new to CSS and I have created a website but after whole work is done my all css elements are getting disordered on screen while minimizing the browser window..how to solve this?
I thought I should have provided the % value instead of pixels value...bt its also not working...
Please Help!
One of the stylesheet having this problem is...
.card-panel{
transition: box-shadow .25s;
padding: 20px;
padding-left: 150px;
margin: 0.5rem 0 1rem 0;
border-radius: 2px;
background-color: #f0f8ff ;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
position:absolute;
top: 100px;
left: 300px;
bottom:300px;
right: 300px;
font-family: calibri;
font-size: 18px;
color: #708090;
z-index: 2;
}
body{
background: #dcdcdc;
}
.profile{
float: right;
position: absolute;
left: 50px;
top: 33px;
bottom:40px;
padding-top: 0px;
padding-left: 0px;
border: 5px solid #708090;
}
.name{
color: #3299cc;
font-weight: bold;
font-size: 30px;
position: relative;
top: 10px;
left: 60px;
font-family: cambria;
}
.profession{
color: #3299cc;
font-size: 15px;
position: relative;
top: 16px;
left: 60px;
font-family: cambria;
}
span{
color: #708090;
}
You should try to use any Front-end frameworks like bootstrap, foundation, skeleton, frame etc. This will solve your problem.
As you've mentioned you're new to css, I strongly recommend you to use skeleton or frame