Advertisement
oscarviedma

Estilos CSS Tutorial testimonios carrusel slider

Nov 17th, 2022 (edited)
2,145
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.01 KB | None | 0 0
  1. /*Estilos del boton en las tarjetas*/
  2. a.ui-btn1 {
  3.     color: #ffffff;
  4.     background: #5D55FA;
  5.     border: 2px solid #5D55FA;
  6.     padding: 4px 15px;
  7.     margin-top: 20px;
  8.     border-radius: 50px;
  9.     display: inline-block;
  10.     transition: all 0.3s ease-in-out;
  11. }
  12. /*Hover. Efecto al pasar el cursor por encima del botón*/
  13. a.ui-btn1:hover {
  14.     background: #1D0EBE;
  15.     color: #fff;
  16.     border: 2px solid #1D0EBE;
  17.     cursor: pointer;
  18.     transition: all 0.3s ease-in-out;
  19. }
  20. /***Estilos para las tarjetas de miembros***/
  21. .ui-tarjeta .ui-botones {
  22.   display: flex;
  23.   justify-content: space-evenly;
  24. }
  25. .ui-tarjeta .et_pb_team_member_image img {
  26.   border: 2px solid #fff;
  27.   border-radius: 100%;
  28. }
  29. /*** Estilos del carrusel***/
  30. /*Bullets*/
  31. .swiper-pagination-bullets {
  32.     position: relative !important;
  33. }
  34. .swiper-pagination-bullet {
  35.   height: 7px!important;
  36.   width: 26px!important;
  37.   border-radius: 25px!important;
  38.   background: #5D55FA!important;
  39.   margin: 0 5px;
  40. }
  41. /* Estilos iconos de siguiente - anterior */
  42. .swiper-button-next, .swiper-button-prev {
  43.   background: #DFDDFE;
  44.   padding: 20px;
  45.   border-radius: 8px;
  46.   top: 45%;
  47.   z-index: 10;
  48.   transition: 0.3s all;
  49. }
  50. .swiper-button-next {
  51.   right: 8%!important;
  52. }
  53. .swiper-button-prev {
  54.   left: 8%!important;
  55. }
  56. /*Hover. Pasar el cursor de los iconos siguiente - anterior*/
  57. .swiper-button-next:hover, .swiper-button-prev:hover {
  58.   background: #5C54F6;
  59.   transition: 0.3s all;
  60. }
  61. /* HOVER - icono de las flechitas blanco*/
  62. .swiper-button-next:hover:after, .swiper-button-prev:hover:after {
  63.   color: #fff;
  64. }
  65. /* NORMAL - Color Icono de las flechitas siguiente - anterior*/
  66. .swiper-button-next:after, .swiper-button-prev:after {
  67.   font-family: 'ETmodules'!important;
  68.   font-size: 25px!important;
  69.   font-weight: 900;
  70.   color: #5C54F6;
  71. }
  72. .swiper-button-prev:after {
  73.   content: '\44'!important;
  74. }
  75. .swiper-button-next:after  {
  76.   content: '\45'!important;
  77. }
  78. @media screen and (max-width: 980px) {
  79.   .swiper-button-next, .swiper-button-prev {
  80.    display: none!important;
  81.   }
  82. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement