de Ashwini Sheshagiri

Butoanele au devenit o parte inevitabilă a dezvoltării front-end. Astfel, este important să rețineți câteva lucruri înainte de a începe să creați butoane de styling. Am adunat câteva dintre modalitățile de stilizare a butoanelor folosind CSS. Puteți combina majoritatea metodelor pentru a crea și un stil nou. Pentru a crea CSS pentru gradiente, puteți utiliza https://uigradients.com.

Un simplu buton „Începeți”

Un ghid rapid pentru butoanele de stil folosind CSS
.btn {
background: #eb94d0;

/ * pentru a crea gradienții * /

  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);

/ * pentru a da marginea curbată pentru 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;}

/ * buton pe hover * /

.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;}

Buton de fundal transparent

1611897125 211 Un ghid rapid pentru butoanele de stil folosind CSS
.btn {

/* Culoarea textului */

      color: #0099CC; 

/ * Eliminați culoarea de fundal * /

      background: transparent; 

/ * Grosimea chenarului, stilul liniei și culoarea * /

      border: 2px solid #0099CC;

/ * Adaugă curba la colțurile marginilor * /

      border-radius: 6px; 

/ * Faceți litere majuscule * /

      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;}

/ * buton pe hover * /

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

Buton cu entități CSS

Puteți găsi lista completă a entităților CSS aici: https://www.w3schools.com/cssref/css_entities.asp

Puteți utiliza, de asemenea, entități HTML, dar acestea sunt limitate. https://www.w3schools.com/html/html_entities.asp

1611897125 404 Un ghid rapid pentru butoanele de stil folosind CSS
.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: '0bb';  /* 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;}

Buton cu animație de clic

1611897126 851 Un ghid rapid pentru butoanele de stil folosind CSS

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);  }});

Buton cu o imagine

1611897127 774 Un ghid rapid pentru butoanele de stil folosind CSS
.btn {
 background: #92c7eb; background-image: url(“http://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;}

Buton cu icoane

1611897127 396 Un ghid rapid pentru butoanele de stil folosind CSS

index.html:

<div class="main"><button class="button" style="vertical-align:middle"><a href="https://www.freecodecamp.org/news/a-quick-guide-to-styling-buttons-using-css-f64d4f96337f/#" class="icon-button twitter"><i class="icon-twitter"></i><span></span></button></a>  <div class="text"><strong>TWEET!</strong></div></div>

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("https://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;}

Concluzie

În acest tutorial, ați învățat cum să personalizați butoanele folosind CSS și un pic de Javascript dacă aveți nevoie de funcția „după clic”. Puteți utiliza, de asemenea CSS3ButtonGenerator pentru a genera butoane simple. Nu ezitați să mă trimiteți ping dacă aveți întrebări.

Dacă ți-a plăcut acest articol și dacă te-a ajutat, dă câteva aplauze! ?