Ένας γρήγορος οδηγός για τα κουμπιά στυλ χρησιμοποιώντας CSS

Τα κουμπιά έχουν γίνει αναπόφευκτο μέρος της ανάπτυξης front end. Επομένως, είναι σημαντικό να έχετε κατά νου μερικά πράγματα πριν ξεκινήσετε το στυλ των κουμπιών. Έχω συγκεντρώσει μερικούς από τους τρόπους στυλ των κουμπιών χρησιμοποιώντας CSS. Μπορείτε επίσης να συνδυάσετε τις περισσότερες από τις μεθόδους για να δημιουργήσετε ένα νέο στυλ. Για να δημιουργήσετε CSS για ντεγκραντέ, μπορείτε να χρησιμοποιήσετε το //uigradients.com.

Ένα απλό κουμπί "Ξεκινήστε"

.btn {
background: #eb94d0;

/ * για να δημιουργήσετε τις κλίσεις * /

 background-image: -webkit-linear-gradient(top, #eb94d0, #2079b0); background-image: -moz-linear-gradient(top, #eb94d0, #2079b0); background-image: -ms-linear-gradient(top, #eb94d0, #2079b0); background-image: -o-linear-gradient(top, #eb94d0, #2079b0); background-image: linear-gradient(to bottom, #eb94d0, #2079b0);

/ * για να δώσει την καμπύλη άκρη για το btn * /

-webkit-border-radius: 28; -moz-border-radius: 28; border-radius: 28px;
text-shadow: 3px 2px 1px #9daef5; -webkit-box-shadow: 6px 5px 24px #666666; -moz-box-shadow: 6px 5px 24px #666666; box-shadow: 6px 5px 24px #666666;
font-family: Arial; color: #fafafa; font-size: 27px; padding: 19px; text-decoration: none;}

/ * κουμπί στο δείκτη * /

.btn:hover {
 background: #2079b0;
 background-image: -webkit-linear-gradient(top, #2079b0, #eb94d0); background-image: -moz-linear-gradient(top, #2079b0, #eb94d0); background-image: -ms-linear-gradient(top, #2079b0, #eb94d0); background-image: -o-linear-gradient(top, #2079b0, #eb94d0); background-image: linear-gradient(to bottom, #2079b0, #eb94d0);
 text-decoration: none;}

Κουμπί διαφανές φόντο

.btn {

/* Χρώμα κειμένου */

 color: #0099CC; 

/ * Αφαίρεση χρώματος φόντου * /

 background: transparent; 

/ * Πάχος περιγράμματος, στυλ γραμμής και χρώμα * /

 border: 2px solid #0099CC;

/ * Προσθέτει καμπύλη στις γωνίες συνόρων * /

 border-radius: 6px; 

/ * Κάντε γράμματα κεφαλαία * /

 border: none; color: white; padding: 16px 32px; text-align: center; display: inline-block; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer; text-decoration: none; text-transform: uppercase;}.btn1 { background-color: white; color: black; border: 2px solid #008CBA;}

/ * κουμπί στο δείκτη * /

 .btn1:hover { background-color: #008CBA; color: white; }

Κουμπί με οντότητες CSS

Μπορείτε να βρείτε την πλήρη λίστα οντοτήτων CSS εδώ: //www.w3schools.com/cssref/css_entities.asp

Μπορείτε επίσης να χρησιμοποιήσετε οντότητες HTML, αλλά είναι περιορισμένες. //www.w3schools.com/html/html_entities.asp

.button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px;}
.button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}
.button span:after {
content: '\00bb'; /* CSS Entities. To use HTML Entities, use →*/
position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s;}
.button:hover span { padding-right: 25px;}
.button:hover span:after { opacity: 1; right: 0;}

Κουμπί με κινούμενη εικόνα κλικ

CSS: (SCSS)

$gray: #bbbbbb;
* { font-family: 'Roboto', sans-serif;}
.container { position: absolute; top:50%; left:50%; margin-left: -65px; margin-top: -20px; width: 130px; height: 40px; text-align: center;}
.btn { color: #0099CC; /* Text color */ background: transparent; /* Remove background color */ border: 2px solid #0099CC; /* Border thickness, line style, and color */ border-radius: 70px; /* Adds curve to border corners */ text-decoration: none; text-transform: uppercase; /* Make letters uppercase */ border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer;}.btn1 { background-color: white; color: black; border: 2px solid #008CBA;} .btn1:hover { background-color: #008CBA; color: white; }
b { outline:none; height: 40px; text-align: center; width: 130px; border-radius:100px; background: #fff; border: 2px solid #008CBA; color: #008CBA; letter-spacing:1px; text-shadow:0; font:{ size:12px; weight:bold; } cursor: pointer; transition: all 0.25s ease;
&:active { letter-spacing: 2px ; } &:after { content:""; }}.onclic { width: 10px !important; height: 70px !important; border-radius: 50% !important; border-color:$gray; border-width:4px; font-size:0; border-left-color: #008CBA; animation: rotating 2s 0.25s linear infinite; &:hover { color: dodgerblue; background: white; }}.validate { content:""; font-size:16px; color: black; background: dodgerblue; border-radius: 50px; &:after { font-family:'FontAwesome'; content:" done \f00c"; }}
@keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}

Javascript: (JQuery)

$(function() { $("#button").click(function() { $("#button").addClass("onclic", 250, validate); });
function validate() { setTimeout(function() { $("#button").removeClass("onclic"); $("#button").addClass("validate", 450, callback); }, 2250); } function callback() { setTimeout(function() { $("#button").removeClass("validate"); }, 1250); }});

Κουμπί με εικόνα

.btn {
 background: #92c7eb; background-image: url(“//res.freestockphotos.biz/pictures/15/15107-illustration-of-a-red-close-button-pv.png"); background-size: cover; background-position: center; display: inline-block; border: none; padding: 20px; width: 70px; border-radius: 900px; height: 70px; transition: all 0.5s; cursor: pointer;}.btn:hover{ width: 75px; height: 75px;}

Κουμπί με εικονίδια

index.html:

TWEET!

style.css:

button{ border: none; border-radius: 50px;}html,body { font-size: 20px; min-height: 100%; overflow: hidden; font-family: "Helvetica Neue", Helvetica, sans-serif; text-align: center;}.text { padding-top: 50px; font-family: "Helvetica Neue", Helvetica, 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}.text:hover{ cursor: pointer; color: #1565C0;}.main { padding: 0px 0px 0px 0px; margin: 0; background-image: url("//someimg"); text-align: center; background-size: 100% !important; background-repeat: no-repeat; width: 900px; height: 700px; }
.icon-button { background-color: white; border-radius: 3.6rem; cursor: pointer; display: inline-block; font-size: 2rem; height: 3.6rem; line-height: 3.6rem; margin: 0 5px; position: relative; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 3.6rem;}
.icon-button span { border-radius: 0; display: block; height: 0; left: 50%; margin: 0; position: absolute; top: 50%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; width: 0;}.icon-button:hover span { width: 3.6rem; height: 3.6rem; border-radius: 3.6rem; margin: -1.8rem;}.twitter span { background-color: #4099ff;}
/* Icons */.icon-button i { background: none; color: white; height: 3.6rem; left: 0; line-height: 3.6rem; position: absolute; top: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; width: 3.6rem; z-index: 10;}.icon-button .icon-twitter { color: #4099ff;}
.icon-button:hover .icon-twitter { color: white;}

συμπέρασμα

Σε αυτό το σεμινάριο, έχετε μάθει πώς να προσαρμόζετε κουμπιά χρησιμοποιώντας CSS και λίγο Javascript εάν χρειάζεστε τη λειτουργία "μετά από κλικ" Μπορείτε επίσης να χρησιμοποιήσετε το CSS3ButtonGenerator για να δημιουργήσετε απλά κουμπιά. Μη διστάσετε να με ping αν έχετε απορίες.

Αν σας άρεσε αυτό το άρθρο και αν σας βοήθησε, δώστε μερικά χειροκρότημα! ;